介绍

通过异步组件和webpack代码分割，实现路由懒加载，按需加载，提升路由页面加载速度。

方法

通过工厂函数返回一个promise对象，异步加载组件
import()返回一个promise对象

import('./test-component')

那么通过工厂函数返回

let testComponent = () => import('./test-component')

路由引入

const routes = [{
  name: 'testComponent',
  path: 'test-component',
  component: testComponent
}]

把组件按组分块

通过添加注释，将一些组件和某一个子组件一起打包成为代码块

const routes = [{
  name: 'testComponent',
  path: 'test-component',
  component: () => import(/* webpackChunkName: 'group-btn' */ './test-component')
}]