路由懒加载

路由懒加载

当打包构建项目时，JS包会变得非常大，影响页面加载，如果能把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件，这样更加高效

1. 安装 @babel/plugin-syntax-dynamic-import包

2. 在 babel.config.js配置文件中声明该插件
   

3. 将路由改为按需加载的形式

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')