項(xiàng)目中多了core.dll.css和core.dll.js 他們就是劃分出來(lái)的固定的,基本不變的模塊,所以只需要編譯一次,以后引用就好.有點(diǎn)library的感覺(jué).這樣每次構(gòu)建省去了構(gòu)建固定模塊的時(shí)間. 時(shí)間有38s降到了10s,如果你構(gòu)建比較頻繁,應(yīng)該還是很有用的.

3. 異步組件 官方文檔

官方文檔是這么介紹的:

在大型應(yīng)用中，我們可能需要將應(yīng)用拆分為多個(gè)小模塊，按需從服務(wù)器下載。為了讓事情更簡(jiǎn)單， Vue.js 允許將組件定義為一個(gè)工廠函數(shù)，動(dòng)態(tài)地解析組件的定義。Vue.js 只在組件需要渲染時(shí)觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來(lái)，用于后面的再次渲染。

修改router

before：

import search from './search.vue'
{
 path: '/search',
 name: 'search',
 component: search
}

after：

const search = resolve => require(['./search.vue'], resolve);
{
 path: '/search',
 name: 'search',
 component: search
}

具體我們來(lái)看看改造后的效果:

因?yàn)槲业捻?xiàng)目目前只有7個(gè)頁(yè)面,即使把頁(yè)面都做成異步加載,效果并不是很'喜人',整體縮小了30kb.

4. 優(yōu)化組件加載時(shí)機(jī)

再使用別人的組件時(shí),上手教程都會(huì)提示讓你在main.js里注冊(cè)一下就好.當(dāng)然這是最省事的辦法.

但是根據(jù)項(xiàng)目情況,比如我的項(xiàng)目用到了vue-baidu-map.

如果你按照默認(rèn)的加載方式,vue-baidu-map是會(huì)被打在vendor.js .但其實(shí)這個(gè)組件我只有某個(gè)二級(jí)頁(yè)面才使用.所以讓我們來(lái)調(diào)整一下加載位置看看.把注冊(cè)的vue-baidu-map放在真正使用它的地方.

這樣,verdor.js 又小了56kb.因?yàn)槭醉?yè)根本用不到vue-baidu-map. 當(dāng)然這樣會(huì)帶來(lái)一個(gè)問(wèn)題:當(dāng)多個(gè)頁(yè)面使用vue-baidu-map,會(huì)出現(xiàn)多個(gè)頁(yè)面重復(fù)打包.

怎么異步加載插件,這個(gè)我還沒(méi)搞明白...

5. webpack-bundle-analyzer

webpack-bundle-analyzer是用來(lái)分析 Webpack 生成的包體組成并且以可視化的方式反饋給開(kāi)發(fā)者的工具.你可以通過(guò)命令:

npm run build --report

來(lái)查看依賴關(guān)系.然后再根據(jù)具體情況劃分代碼塊.效果圖就是上面那張花里胡哨的圖...它清楚的告訴你了打包時(shí)模塊劃分的情況.

6. 前后對(duì)比:

638.7kb vs 286.2kb

這還是在未開(kāi)啟gzip的情況下.

新增一張開(kāi)啟gzip的截圖,84.8kb,相對(duì)最后的優(yōu)化結(jié)果286.2kb是70%的壓縮比...哈哈

總結(jié)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com