資訊專欄INFORMATION COLUMN
摘要：記錄一個前端項目優(yōu)化的路程，效果如上圖。第二步優(yōu)化結(jié)果再次運行查看項目打包情況可以看到項目體積已經(jīng)優(yōu)化到，中也看不到的蹤影了。本文主要想提供一些優(yōu)化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。
記錄一個前端項目優(yōu)化的路程，效果如上圖。
接下來我們在正文講解具體優(yōu)化步驟、思路以及優(yōu)化前后對比，另外還有/static下文件被打包的解決方法。
PS：正文中圖片模糊的話請右鍵“在新標簽頁打開圖片”查看原圖
原文首發(fā)于我的個人網(wǎng)站 lonhon.top，轉(zhuǎn)載請注明出處。
WHY，為什么進行優(yōu)化本周在做的一個vue項目進入到測試階段，在打包時候發(fā)現(xiàn)build耗時過長（近3分鐘），覺得是有點異常，有過更復雜的項目但是耗時基本也在1分鐘內(nèi)，所以運行npm run build --report生成打包的矩陣樹圖（Treemap）來進行排查，report截圖如下：
發(fā)現(xiàn)項目中Location頁面（用于數(shù)據(jù)可視化地理空間展示）的可視化功能所用到的幾個國家map文件赫然出現(xiàn)在最前面，而項目打包后尺寸也達到了8.76M。
另外，在進入該頁面時發(fā)現(xiàn)頁面加載耗時明顯增加（1.js有6.77M），說明頁面渲染被堵塞。
HOW，如何進行優(yōu)化 第一步，優(yōu)化靜態(tài)資源分析后得出結(jié)論：map文件被打包到1.js中導致build和頁面渲染時間增多。
接下來是優(yōu)化思路：
map文件基本不會動，所以可以壓縮后放在/static中引入，減少build耗時
使用defer引入，解決頁面渲染被堵塞的問題
static踩坑因為項目使用vue-cli工具，此前記得文檔中說靜態(tài)資源放在/static中會直接copy而不進行打包
把map文件直接移動到/static目錄，還是會對這些文件進行打包，后面才想通：
資源放在/static不會被打包 ?
不打包的資源放在/static ?
首先，/static目錄下的資源需要使用絕對路徑進行引入，比如img.src="/static/xxx.png"；其次，如果在vue或js文件中使用import引入/static目錄下的資源也是會被跟蹤到然后一起打包的。
所以最終是在index.html文件中直接使用script標簽引入map資源，并使用defer方式避免堵塞頁面正常渲染
第一步優(yōu)化結(jié)果接下來看看優(yōu)化效果：
可以看到現(xiàn)在打包后項目體積優(yōu)化到2M。
此外，實際build時間也從3min減少到50s左右，Location頁面渲染時間過長的問題也得到解決。
第二步，分離echarts雖然項目體積已經(jīng)銳減，但是個人對2M這個數(shù)字還不夠滿意，可以看到現(xiàn)在圖中Treemap sizes顯示最大的文件是vendor.js，vendor.js里面放著項目的一些依賴模塊如vue、vue-route、axios、element-ui、echarts等，同時也可以看到現(xiàn)在最大的模塊是echarts，所以接下來試著將echarts通過cdn的方式引入來達到減少項目體積的目的。
此處優(yōu)化關鍵字：webpack externals，具體介紹見webpack文檔 。我們可以簡單理解為從cdn加載第三方模塊，從而減少服務器壓力和項目體積。
在/build/webpack.prod.conf.js文件中添加externals(vue-cli版本不同會有差異)：
{
// other setting
externals: {
"echarts": "echarts"
}
}
在index.html中使用script標簽從cdn引入echarts
可以看到項目體積已經(jīng)優(yōu)化到1.26M，vendor.js中也看不到echarts的蹤影了。
結(jié)語至此本文結(jié)束，實際開發(fā)中各個項目的主要優(yōu)化點都各不相同，需要在開發(fā)過程中一一發(fā)掘。
本文主要想提供一些優(yōu)化思路及手段，即如何定位（通過build report，查看頁面加載時間）問題，然后再解決這些問題。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54850.html
摘要：記錄一個前端項目優(yōu)化的路程，效果如上圖。第二步優(yōu)化結(jié)果再次運行查看項目打包情況可以看到項目體積已經(jīng)優(yōu)化到，中也看不到的蹤影了。本文主要想提供一些優(yōu)化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優(yōu)化的路程，效果如上圖。 接下來我...
摘要：優(yōu)化空間不大主要關注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優(yōu)化空間較小。當然，從整體優(yōu)化的大維度上來說優(yōu)化的點還有很多，這個文章繼續(xù)更新下去。 項目現(xiàn)狀 項目是一個數(shù)據(jù)監(jiān)測平臺，引入了ehcart和three.js 負責項目的數(shù)據(jù)可視化；打包后，體積高達2.1M，這個體積相比于我的項目規(guī)模來說就顯得稍有笨重了 使用webpack-bundle-analyzer分析了...
摘要：相當于可以編輯問卷并提供問卷展示，數(shù)據(jù)統(tǒng)計的這么一個平臺。極大的節(jié)省了需要進行表單樣式修改的時間，同時，讓動態(tài)渲染表單成為一件可能且容易的事情。表單動態(tài)渲染剛好在項目之前，有過一次動態(tài)配置表單的嘗試通過字段自動生成表單及驗證。 近幾天來了個緊急項目，想要做一個內(nèi)部版本的問卷星。相當于可以編輯問卷并提供問卷展示，數(shù)據(jù)統(tǒng)計的這么一個平臺。整個項目耗時不長，本著積淀和積累的原則，將過程中的...
摘要：寫在最前本次分享一下在作者上一次失利即拿到畢業(yè)證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實際情況，做出的未來一到兩年的規(guī)劃。在博客有一定曝光度的積累中，陸續(xù)收到了一些面試邀請，基本上是阿里的但是我知道我菜。。 寫在最前 本次分享一下在作者上一次失利即拿到畢業(yè)證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實際情況，做出的未來一到兩年的規(guī)劃。以及本次社招...
閱讀 2275·2021-09-30 09:48
閱讀 3648·2021-09-24 10:27
閱讀 1805·2021-09-22 15:32
閱讀 2036·2021-08-09 13:44
閱讀 3585·2019-08-30 15:55
閱讀 1057·2019-08-29 17:12
閱讀 2019·2019-08-29 17:05
閱讀 2929·2019-08-29 13:43
