Vue路由懒加载浅析

Vue路由懒加载浅析

首先，如果不采用路由的懒加载方式，那么我们将项目进行打包后会发现dist文件夹下的static>js文件夹中会有三个js文件。分别是app.js /mainfest.js/ vendor.js。分别存放的是业务代码，底层支撑以及第三方应用。
通常来说当我们打包构建应用时，Javascript包会变得非常大，影响页面加载。而当我们把不同路由对应的组件分成不同的代码块，当路由被访问时才加载相关的组件，这样就能够避免一次加载过多所带来的的加载时间过长的问题。这也就是所谓的懒加载。
懒加载的方式在此我只写一种我常用的方式：在component中通过箭头函数导入对应的vue插件。

  component:()=>import('../components/Home')

采用懒加载后再次进行打包会发现dist>static>js文件下会出现新的js文件，其实就是对应着你的不同路由。