项目优化策略之——vue路由懒加载

vue路由懒加载

场景：当打包构建项目时，JavaScript包会变得非常大，从而影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，这样就会使得项目运行变得更加高效了。

步骤一：

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

步骤二：

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

步骤三：

将路由改为按需加载形式：

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