当打包构建项目时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
具体需要 3 步:
安装 @babel/plugin-syntax-dynamic-import包。
在 babel.config.js 配置文件中声明该插件。
将路由改为按需加载的形式,示例代码如下:
Javascript
// /* webpackChunkName: "group-foo" */表示路由分组 // './Foo.vue' 表示路由存放路径 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')
分在同一个组内的组件,当请求其中某一个组件时,组内其它组件也会同时请求。
关于路由懒加载的详细文档,可参考如下链接:
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
@babel/plugin-syntax-dynamic-import 插件介绍传送门
npm
Javascript
npm install --save-dev @babel/plugin-syntax-dynamic-import
打开 vue-ui 面板,选择开发依赖,输入 @babel/plugin-syntax-dynamic-import 进行安装
。
然后打开 babel.config.js 文件,在 plugins 数组内添加我们安装的依赖: '@babel/plugin-syntax-dynamic-import',具体位置见下文所示:
Javascript
// 项目发布阶段需要用到的 babel 插件 const prodPlugins = [] // 判断编译模式为生产环境 if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console') } module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ], ...prodPlugins, '@babel/plugin-syntax-dynamic-import' ] }