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优化：路由懒加载作用，路由为什么要按需加载’’的全部内容，欢迎大家一起探讨。