vue项目优化(一)——路由懒加载的必要性

一.为什么要用路由懒加载

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

用具体的图来说明

没使用路由懒加载

可以看到app.js的文件大小247kb    用了57ms

 使用路由懒加载

从数据可以看出这对性能有了很大的提升

二.实现步骤

1。安装插件

npm i babel-plugin-syntax-dynamic-import -D

2.在babel.config.js中配置   '@babel/plugin-syntax-dynamic-import'

 3.在路由文件中进行修改

component:() => import(/* webpackChunkName: "mine" */ '../views/mine'),

webpackChunkName:中名字随便起

后面的路径是=文件所在目录