vue路由懒加载
场景:当打包构建项目时,JavaScript包会变得非常大,从而影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应组件,这样就会使得项目运行变得更加高效了。
步骤一:
安装 @babel/plugin-syntax-dynamic-import 包
步骤二:
在babel.config.js配置文件声明该插件
步骤三:
将路由改为按需加载形式:
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')