1.为什么要使用路由懒加载？
当我们没有做任何优化的时候，webpack会一次性把所有东西打包在一起，页面和组件等会打包成app.js，所有第三方库会打包成chunk-vendors.js，在首屏时一起加载，这时如果打包后体积过大，会影响页面加载速度，出现白屏，用户体验不佳，且里面包含了大量首屏没有使用到的组件。
如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，即每个页面只加载自己需要的组件，页面加载速度会得到较大提升
2.如何实现路由懒加载？
一. 路由动态导入
我们可以看到现在打包完的文件体积都很大，app.js达到109.31kb
我们将路由的引入方式改为动态导入，在router.js，之前是：
import Home from "../components/home/home";
现在改为(路由动态导入还有其他方法，这里只介绍一种）
const Home = () =>
import("@/components/home/home");
重新打包，打包结果如下,我们可以看到拆分成很多文件，app.js体积变为16.21kb
但是这样拆分太细了，可以看到有的js经过压缩后只要1kb，拆分过细会增加网络请求的数量，所以我们可以对组件进行划分，进行分组打包
二. 分组打包
如下，在/* webpackChunkName: xx */中配置分组：
const Home = () => import(/* webpackChunkName: "home" */ "@/components/home");
const Repos = () => import(/* webpackChunkName: "repos" */ "@/components/repos");
可以看到分组后文件数减少了
我们可以在network看到在路由懒加载处理前，后加载时间对比（本地环境，没有经过gzip压缩）：
处理后：
虽然app.js的体积变小，加载速度变快，但是可以看到我们刚刚分组打包而成的js全部加载了，那这样懒加载是不是就没有生效？
其实这是由于vue-cli3之后，默认配置了webpack的预加载，这时候除了路由懒加载需要的当前页面资源，其他资源也会被请求，仍然会耗时下载，但不会被解析。
由于预加载文件比较多，反而阻塞了我们实际需要加载的文件，首页渲染速度变慢，如上图可以看到我们所需到home.js在最后才进行加载。所以我们可以关闭预加载或修改选项。
三. 取消预加载
在vue.config.js中配置：
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 或者修改它的选项：
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
