記一次Vue項(xiàng)目?jī)?yōu)化及思路

nanchen2251 發(fā)布于2019-08-23 16:49 / 3432人閱讀

摘要：記錄一個(gè)前端項(xiàng)目?jī)?yōu)化的路程，效果如上圖。第二步優(yōu)化結(jié)果再次運(yùn)行查看項(xiàng)目打包情況可以看到項(xiàng)目體積已經(jīng)優(yōu)化到，中也看不到的蹤影了。本文主要想提供一些優(yōu)化思路及手段，即如何定位通過，查看頁(yè)面加載時(shí)間問題，然后再解決這些問題。

記錄一個(gè)前端項(xiàng)目?jī)?yōu)化的路程，效果如上圖。

接下來(lái)我們?cè)谡闹v解具體優(yōu)化步驟、思路以及優(yōu)化前后對(duì)比，另外還有/static下文件被打包的解決方法。

PS：正文中圖片模糊的話請(qǐng)右鍵“在新標(biāo)簽頁(yè)打開圖片”查看原圖

原文首發(fā)于我的個(gè)人網(wǎng)站 lonhon.top，轉(zhuǎn)載請(qǐng)注明出處。

WHY，為什么進(jìn)行優(yōu)化

本周在做的一個(gè)vue項(xiàng)目進(jìn)入到測(cè)試階段，在打包時(shí)候發(fā)現(xiàn)build耗時(shí)過長(zhǎng)（近3分鐘），覺得是有點(diǎn)異常，有過更復(fù)雜的項(xiàng)目但是耗時(shí)基本也在1分鐘內(nèi)，所以運(yùn)行npm run build --report生成打包的矩陣樹圖（Treemap）來(lái)進(jìn)行排查，report截圖如下：

發(fā)現(xiàn)項(xiàng)目中Location頁(yè)面（用于數(shù)據(jù)可視化地理空間展示）的可視化功能所用到的幾個(gè)國(guó)家map文件赫然出現(xiàn)在最前面，而項(xiàng)目打包后尺寸也達(dá)到了8.76M。

另外，在進(jìn)入該頁(yè)面時(shí)發(fā)現(xiàn)頁(yè)面加載耗時(shí)明顯增加（1.js有6.77M），說明頁(yè)面渲染被堵塞。

HOW，如何進(jìn)行優(yōu)化 第一步，優(yōu)化靜態(tài)資源

分析后得出結(jié)論：map文件被打包到1.js中導(dǎo)致build和頁(yè)面渲染時(shí)間增多。

接下來(lái)是優(yōu)化思路：

map文件基本不會(huì)動(dòng)，所以可以壓縮后放在/static中引入，減少build耗時(shí)

使用defer引入，解決頁(yè)面渲染被堵塞的問題

static踩坑

因?yàn)轫?xiàng)目使用vue-cli工具，此前記得文檔中說靜態(tài)資源放在/static中會(huì)直接copy而不進(jìn)行打包

把map文件直接移動(dòng)到/static目錄，還是會(huì)對(duì)這些文件進(jìn)行打包，后面才想通：

~~資源放在/static不會(huì)被打包~~ ?

不打包的資源放在/static ?

首先，/static目錄下的資源需要使用絕對(duì)路徑進(jìn)行引入，比如img.src="/static/xxx.png"；其次，如果在vue或js文件中使用import引入/static目錄下的資源也是會(huì)被跟蹤到然后一起打包的。

所以最終是在index.html文件中直接使用script標(biāo)簽引入map資源，并使用defer方式避免堵塞頁(yè)面正常渲染


可以看到現(xiàn)在打包后項(xiàng)目體積優(yōu)化到2M。
此外，實(shí)際build時(shí)間也從3min減少到50s左右，Location頁(yè)面渲染時(shí)間過長(zhǎng)的問題也得到解決。
第二步，分離echarts
雖然項(xiàng)目體積已經(jīng)銳減，但是個(gè)人對(duì)2M這個(gè)數(shù)字還不夠滿意，可以看到現(xiàn)在圖中Treemap sizes顯示最大的文件是vendor.js，vendor.js里面放著項(xiàng)目的一些依賴模塊如vue、vue-route、axios、element-ui、echarts等，同時(shí)也可以看到現(xiàn)在最大的模塊是echarts，所以接下來(lái)試著將echarts通過cdn的方式引入來(lái)達(dá)到減少項(xiàng)目體積的目的。
此處優(yōu)化關(guān)鍵字：webpack externals，具體介紹見webpack文檔 。我們可以簡(jiǎn)單理解為從cdn加載第三方模塊，從而減少服務(wù)器壓力和項(xiàng)目體積。
在/build/webpack.prod.conf.js文件中添加externals(vue-cli版本不同會(huì)有差異)：
{
  // other setting
  externals: {
    "echarts": "echarts"
  }
}
在index.html中使用script標(biāo)簽從cdn引入echarts
    
可以看到項(xiàng)目體積已經(jīng)優(yōu)化到1.26M，vendor.js中也看不到echarts的蹤影了。
結(jié)語(yǔ)
至此本文結(jié)束，實(shí)際開發(fā)中各個(gè)項(xiàng)目的主要優(yōu)化點(diǎn)都各不相同，需要在開發(fā)過程中一一發(fā)掘。
本文主要想提供一些優(yōu)化思路及手段，即如何定位（通過build report，查看頁(yè)面加載時(shí)間）問題，然后再解決這些問題。