vue路由懒加载

vue路由懒加载是性能优化考虑的一种策略。

假如在router内需要引入一个component文件，

import PrevComp from './components/prev-comp'
import NextComp from './components/next-comp'

这是常规的文件引入方式，这种方式下有用到和没有用到的文件都会被引入，增加资源加载性能消耗。

 

 

此时可以使用懒加载的方式，顾名思义，使用变量保存一个匿名的箭头函数，该箭头函数return文件资源引用。本质是赋值保存，当运行到此处需要使用该变量时，才读取该变量保存的路径所能够引入的资源文件。

const PrevComp = () => import('./components/prev-comp')

 

增加引入资源文件分类功能： 

const PrevComp = () => import(/* webpackChunkName: "prev-team" */'./components/prev-comp')
const NextComp = () => import(/* webpackChunkName: "next-team" */'./components/next-comp')

 

 

此时可以看到，引入app.js文件的大小明显变小很多，由于当前页面定格在prev-team，这里只引入了prev-team文件，比如next-team页面未使用，虽然在路由定义中，文件未被引入，减少了资源加载量。

build打包资源：

这是未使用懒加载的方式 

 

 

 这是使用懒加载的方式

 

 

 

总结：

懒加载方式build后的相关组件资源包稍微大一些，在页面加载阶段请求的资源量上，懒加载方式下的资源引入量上减少很多，使用懒加载的主要优势应该是体现在页面打开时资源的请求量上，体现了“按需加载”的精髓。