Vue首屏加載優(yōu)化

Vue在開發(fā)WebApp的時(shí)候皮假，有一個(gè)致命的缺點(diǎn)转锈，那就是首次加載事件過長，本篇文章主要使用各種方法縮減文件大小尤误，并不涉及服務(wù)端渲染侠畔。

環(huán)境

Vue CLI3+Vue全家桶
服務(wù)器 1 核 2 GB 1 Mbps（最大128 kb/s）

分析工具

VueCLI UI 下的分析工具
肉眼對(duì)比打包后文件大小

對(duì)優(yōu)化方法的分類

下載資源階段
加載渲染階段
頁面操作階段

本文只討論下載階段

開始

直接啟動(dòng)npm run build得到結(jié)果：

image.png

可以發(fā)現(xiàn)文件十分的大，進(jìn)入js 后發(fā)現(xiàn)了大量的.map文件：

image.png

.map文件的作用：像地圖一樣指示出打包后文件運(yùn)行錯(cuò)誤的具體位置损晤，對(duì)于一個(gè)打包上線的項(xiàng)目而言软棺，這不僅沒用，還具有風(fēng)險(xiǎn)尤勋，所以應(yīng)該去掉喘落，手動(dòng)刪除是笨比方法，只需要更改vue.config.js即可：

module.exports = {
  //使用HTML5 History 應(yīng)該使用絕對(duì)路徑
  publicPath: "/"
  productionSourceMap: false
};

再次打包：

image.png

文件發(fā)生了巨大的變化最冰，進(jìn)去查看后發(fā)現(xiàn)沒有了.map文件瘦棋，但是大家不要忘記了，前文中我的服務(wù)器寬帶是1Mbps暖哨，也就是說最大的下載速度也就是128kb/s赌朋，雖然我使用了路由的懶加載，但是首屏的文件大小也有590kb:

image.png

計(jì)算一下大約需要4.6s才能下載到瀏覽器篇裁，而首屏加載不只需要這一個(gè)js文件沛慢，還有很多的css下載,Dom渲染，現(xiàn)在的加載事件大約是10s茴恰。

image.png

優(yōu)化

我們啟動(dòng) vue ui ,去編譯頁面看看都是那個(gè)依賴造成的颠焦。

image.png

結(jié)果發(fā)現(xiàn)muse-ui 和 swiper占了主要的鍋。

雖然我對(duì)muse-ui使用了組件按需加載往枣，但是我在 main.js中把所有的組件都引入進(jìn)去了伐庭，所以等于沒有按需引入，把不需要的組件引入刪除后muse-ui占比可以看到明顯下降分冈，但是這不是今天的主角圾另。

對(duì)于這種情況，一般的解決方法就是雕沉，阻止webpack打包集乔，去引入CDN加速，我的服務(wù)器下載速度只有 128kb/s 而已坡椒，不如去讓它引入CDN的代碼扰路，這樣速度會(huì)大大提高。
還是在vue.config.js中添加：

//本文件
module.exports = {
  //使用HTML5 History 應(yīng)該使用絕對(duì)路徑
  publicPath: "/",
  productionSourceMap: false,
  configureWebpack: {
   externals: {
      vue:'Vue',
      MuseUI: "muse-ui"
    }
 }
};

同時(shí)在index.html中加入muse-ui和Vue的CDN連接倔叼。
main.js中的muse-ui引入不需要改變汗唱，在vue,config.js中設(shè)置為外部后，main.js中就失效了丈攒，同時(shí)把Vue也設(shè)置為外部引入哩罪，因?yàn)閙use-ui必須要在Vue實(shí)例化后才能引入授霸，而index.html里面得引入是最開始執(zhí)行的，會(huì)導(dǎo)致muse-ui未定義的錯(cuò)誤际插。
打包后結(jié)果是：