项目优化——路由懒加载
官网:/package/babel-plugin-syntax-dynamic-import
1、路由懒加载
当打包构建项目时,JavaScript包会变得非常大,影响页面的加载。如果我们把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载组件
步骤:
①安装@babel/plugin-syntax-dynamic-import 包
②在babel.config.js配置文件中声明该插件
③把路由改成按需加载的形式
2、安装@babel/plugin-syntax-dynamic-import 包
$ npm install babel-plugin-syntax-dynamic-import
3、在babel.config.js配置文件中声明该插件
{"plugins": ["syntax-dynamic-import"]}
4、把路由改成按需加载的形式
//写法const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')