当打包构建项目时 js包会变得非常大 影响页面加载 如果把不同路由对应的组件分割
成不同的代码块 路由被访问的时候才加载对应组件 这个就更加高效了
官网 : https://www.babeljs.cn/docs/babel-plugin-syntax-dynamic-import
分为三步:
1. 安装 @babel/plugin-syntax-dynamic-import 开发依赖
npm install --save-dev @babel/plugin-syntax-dynamic-import

2. 配置 在 babel.config.js 声明该插件
"@babel/plugin-syntax-dynamic-import"
vue 路由懒加载
3. 在 router/index.js 将路由改为按需加载的形式
"@babel/plugin-syntax-dynamic-import"
vue 路由懒加载
安装之前打包的大小和安装之后打包的大小
vue 路由懒加载
**之后**
vue 路由懒加载

相关文章: