IOS美区账号微信: springsunshine2017

前端技术 · 2021年2月18日 0

vue优化:路由懒加载作用,路由为什么要按需加载?

vue优化是个多角度的综合题,今天来通过实例聊一下vue优化中的路由懒加载,也叫按需加载。

路由懒加载作用的直接作用

使用路由懒加载后,可以减小app.js文件的大小,从而缩短第一次打开vue项目的加载时间。

为什么?

接下来通过一个简单的案例来说明为什么使用路由懒加载后,可以减小app.js文件的大小。

首先我们写7个路由的菜单,然后两种方式去打包。

第一种是直接把组件通过import引用到页面,然后打包,文件列表如下:

其中app.js 259 kb

第二种是将组件通过component: ()=>import(‘@/view/tab2/tab32’)的方式动态加载后打包,文件列表如下:

其中app.js 35 kb,然后多了12个文件。通过 比对app.js的文件我们发现,没有使用动态加载的方式打包后,组件中的DOM文本全部打包在了app.js文件中,如下图,DOM文本被赋值在staticRenderFns函数对象中。

这样一来,路由越多,app.js文件越大,app.js越大,第一次打开vue项目的时间越久。

使用动态加载的方式后,每个组件的DOM文本会单独打包成一个文件,这也就是为什么第二种方式会多出十几个文件的原因。当用户路由访问的时候,页面会动态加载对应的文件,这样就是现实了首次快速打开vue项目的优化方式之一。

以上就是‘‘vue优化:路由懒加载作用,路由为什么要按需加载’’的全部内容,欢迎大家一起探讨。