1.為什么要使用路由懶加載臼朗？
當(dāng)我們沒有做任何優(yōu)化的時候，webpack會一次性把所有東西打包在一起谨湘，頁面和組件等會打包成app.js媳握，所有第三方庫會打包成chunk-vendors.js，在首屏?xí)r一起加載形病，這時如果打包后體積過大客年，會影響頁面加載速度霞幅，出現(xiàn)白屏，用戶體驗不佳量瓜，且里面包含了大量首屏沒有使用到的組件司恳。
如果能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)組件绍傲，即每個頁面只加載自己需要的組件扔傅，頁面加載速度會得到較大提升
2.如何實現(xiàn)路由懶加載？
一. 路由動態(tài)導(dǎo)入
我們可以看到現(xiàn)在打包完的文件體積都很大唧取，app.js達到109.31kb
我們將路由的引入方式改為動態(tài)導(dǎo)入铅鲤，在router.js，之前是：
import Home from "../components/home/home";
現(xiàn)在改為(路由動態(tài)導(dǎo)入還有其他方法枫弟，這里只介紹一種）
const Home = () =>
? import("@/components/home/home");
重新打包邢享，打包結(jié)果如下,我們可以看到拆分成很多文件，app.js體積變?yōu)?6.21kb
但是這樣拆分太細了淡诗，可以看到有的js經(jīng)過壓縮后只要1kb骇塘，拆分過細會增加網(wǎng)絡(luò)請求的數(shù)量，所以我們可以對組件進行劃分韩容，進行分組打包
二. 分組打包
如下款违，在/* webpackChunkName: xx */中配置分組：
const Home = () => import(/* webpackChunkName: "home" */ "@/components/home");
const Repos = () =>? import(/* webpackChunkName: "repos" */ "@/components/repos");
可以看到分組后文件數(shù)減少了
我們可以在network看到在路由懶加載處理前，后加載時間對比（本地環(huán)境群凶，沒有經(jīng)過gzip壓縮）：
處理后：
雖然app.js的體積變小插爹，加載速度變快，但是可以看到我們剛剛分組打包而成的js全部加載了请梢，那這樣懶加載是不是就沒有生效赠尾？
其實這是由于vue-cli3之后，默認配置了webpack的預(yù)加載毅弧，這時候除了路由懶加載需要的當(dāng)前頁面資源气嫁，其他資源也會被請求，仍然會耗時下載够坐，但不會被解析寸宵。
由于預(yù)加載文件比較多，反而阻塞了我們實際需要加載的文件元咙，首頁渲染速度變慢梯影，如上圖可以看到我們所需到home.js在最后才進行加載。所以我們可以關(guān)閉預(yù)加載或修改選項庶香。
三. 取消預(yù)加載
在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
? ? })
? }
}
