記一次Vue項目優化及思路

keithxiaoy 發布于2019-08-02 16:12 / 3165人閱讀

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

記錄一個前端項目優化的路程，效果如上圖。

接下來我們在正文講解具體優化步驟、思路以及優化前后對比，另外還有/static下文件被打包的解決方法。

PS：正文中圖片模糊的話請右鍵“在新標簽頁打開圖片”查看原圖

原文首發于我的個人網站 lonhon.top，轉載請注明出處。

WHY，為什么進行優化

本周在做的一個vue項目進入到測試階段，在打包時候發現build耗時過長（近3分鐘），覺得是有點異常，有過更復雜的項目但是耗時基本也在1分鐘內，所以運行npm run build --report生成打包的矩陣樹圖（Treemap）來進行排查，report截圖如下：

發現項目中Location頁面（用于數據可視化地理空間展示）的可視化功能所用到的幾個國家map文件赫然出現在最前面，而項目打包后尺寸也達到了8.76M。

另外，在進入該頁面時發現頁面加載耗時明顯增加（1.js有6.77M），說明頁面渲染被堵塞。

HOW，如何進行優化 第一步，優化靜態資源

分析后得出結論：map文件被打包到1.js中導致build和頁面渲染時間增多。

接下來是優化思路：

map文件基本不會動，所以可以壓縮后放在/static中引入，減少build耗時

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

static踩坑

因為項目使用vue-cli工具，此前記得文檔中說靜態資源放在/static中會直接copy而不進行打包

把map文件直接移動到/static目錄，還是會對這些文件進行打包，后面才想通：

~~資源放在/static不會被打包~~ ?

不打包的資源放在/static ?

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

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

可以看到現在打包后項目體積優化到2M。

此外，實際build時間也從3min減少到50s左右，Location頁面渲染時間過長的問題也得到解決。

第二步，分離echarts

雖然項目體積已經銳減，但是個人對2M這個數字還不夠滿意，可以看到現在圖中Treemap sizes顯示最大的文件是vendor.js，vendor.js里面放著項目的一些依賴模塊如vue、vue-route、axios、element-ui、echarts等，同時也可以看到現在最大的模塊是echarts，所以接下來試著將echarts通過cdn的方式引入來達到減少項目體積的目的。

此處優化關鍵字：webpack externals，具體介紹見webpack文檔。我們可以簡單理解為從cdn加載第三方模塊，從而減少服務器壓力和項目體積。

在/build/webpack.prod.conf.js文件中添加externals(vue-cli版本不同會有差異)：

{
  // other setting
  externals: {
    "echarts": "echarts"
  }
}

在index.html中使用script標簽從cdn引入echarts

可以看到項目體積已經優化到1.26M，vendor.js中也看不到echarts的蹤影了。

結語

至此本文結束，實際開發中各個項目的主要優化點都各不相同，需要在開發過程中一一發掘。

本文主要想提供一些優化思路及手段，即如何定位（通過build report，查看頁面加載時間）問題，然后再解決這些問題。

GPU云服務器云服務器記一次在阿里云搭建服務器記一次阿里云服務器集體中毒 java代碼優化思路云服務器搭建vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54850.html

記一次Vue項目優化及思路

摘要：記錄一個前端項目優化的路程，效果如上圖。第二步優化結果再次運行查看項目打包情況可以看到項目體積已經優化到，中也看不到的蹤影了。本文主要想提供一些優化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優化的路程，效果如上圖。接下來我...

nanchen2251 2019-08-23 16:49 評論0 收藏0
記一次vue-webpack項目優化實踐【更新】

摘要：優化空間不大主要關注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優化空間較小。當然，從整體優化的大維度上來說優化的點還有很多，這個文章繼續更新下去。項目現狀項目是一個數據監測平臺，引入了ehcart和three.js 負責項目的數據可視化；打包后，體積高達2.1M，這個體積相比于我的項目規模來說就顯得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 評論0 收藏0
使用Vue渲染可配置表單--記一次問卷平臺項目

摘要：相當于可以編輯問卷并提供問卷展示，數據統計的這么一個平臺。極大的節省了需要進行表單樣式修改的時間，同時，讓動態渲染表單成為一件可能且容易的事情。表單動態渲染剛好在項目之前，有過一次動態配置表單的嘗試通過字段自動生成表單及驗證。近幾天來了個緊急項目，想要做一個內部版本的問卷星。相當于可以編輯問卷并提供問卷展示，數據統計的這么一個平臺。整個項目耗時不長，本著積淀和積累的原則，將過程中的...

mcterry 2019-08-20 15:49 評論0 收藏0
記一次“失利后”經過半年準備通過阿里社招的經歷與感悟

摘要：寫在最前本次分享一下在作者上一次失利即拿到畢業證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實際情況，做出的未來一到兩年的規劃。在博客有一定曝光度的積累中，陸續收到了一些面試邀請，基本上是阿里的但是我知道我菜。。寫在最前本次分享一下在作者上一次失利即拿到畢業證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實際情況，做出的未來一到兩年的規劃。以及本次社招...

malakashi 2019-08-26 11:36 評論0 收藏0