vue路由懒加载

当打包应用时会把所有的组件打包进app.js，这会使app.js文件过大，影响页面加载速度，为了提高首屏加载速度需要使用懒加载

预加载：浏览器在页面(app.js)加载完成后，利用空闲时间加载用户未来可能会访问的组件

懒加载：把不同路由对应的组件打包成不同的js文件，默认不加载这些组件，只有当路由被访问的时候才加载对应组件

目前普遍使用的脚手架是 @vue/cli5和 @vue/cli4.5，这两个版本在做懒加载时略有不同

@vue/cli5

其实使用脚手架创建项目时已经自带了一个懒加载的示例，结合了Vue异步组件和Webpack代码分割功能

router/index.js

 ...
 ​
 const routes = [
   ...
   {
     path: '/about',
     name: 'about',
     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
   }
 ]
 ​
 ...

AboutView.vue使用import() 动态引入，使用webpack的内联注释 / webpackChunkName: "文件名" / 来指定组件打包后js文件名

AboutView.vue不会被打包到app.js中，而是单独打包成一个about.js，默认不加载，只有访问 '/about' 的时候about.js才会被加载

如果多个组件 / webpackChunkName: "" / 使用相同的名字则视为一组会打包到同一个js文件

@vue/cli4.5

@vue/cli4.5也自带了懒加载示例，但是启动后访问会发现初始多加载一个about.js

这是由于 @vue/cli4.5中自带预加载，通过import() 引入的组件会自动加上prefetch

查看index.html可以看到添加了 < link href="/js/about.js" rel="prefetch" >

所以在 @vue/cli4.5中预加载和懒加载是同时生效的（具体为啥这么设计目前尚不清楚）

需要在项目根目录中配置vue.config.js去掉预加载，注意修改vue.config.js文件需要重启脚手架

vue.config.js

 module.exports = {
   chainWebpack: config => {
     // 移除 prefetch 插件
     config.plugins.delete('prefetch')
   }
 }