記一次vue+element+echarts項目的優化（如何輕鬆將項目性能提高70%）

注意：本文有點標題黨了，圖不少很羅嗦，不想看圖的同窗能夠直接看加粗的內容和最後的總結

第一次在掘金寫文章，哪裏有不對的地方或者更好的方案請不要給我面子，立刻提出來

最近在作一個項目，技術棧爲vue全家桶 + element-ui + echarts，打包後發現有1.44M，首屏體驗不好。這能忍？果斷開始優化。下面說說我是如何將一個打包後1.44MB的項目變成打包後只有0.42MB，性能提高70% 的。html

優化過程

準備：vue

vue-cli提供了一個很方便的查看代碼打包後體積的命令，只需在正常的打包命令後加一個--report便可，這樣打包完成後會自動開啓一個頁面，展現各個依賴包的大小。webpack
```
npm run build --report
複製代碼
```
優化前：git

先看看優化前的大小吧github

這是打包前本地localhost中首屏加載的js文件，只有一個app.js （3.2MB）（注意是本地，未打包，未壓縮）

這是打包後的截圖，體積爲1.44MB,打包時間爲72s
第一次優化：路由懶加載web

說到優化，第一個確定考慮的是懶加載啦，立刻在vue和vue-router的官方文檔裏找到了解決方案vue-router

結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載vue-cli

具體作法的話以下：npm

首先要安裝一個插件Syntax Dynamic Import使項目支持動態import
```
cnpm install -S babel-plugin-syntax-dynamic-import
複製代碼
```
而後修改.babelrc文件
```
// .babelrc 中的plugins數組中多加一個"syntax-dynamic-import"
{
  "plugins": ["syntax-dynamic-import"]
}
複製代碼
```
最後修改router.js,將全部路由都改成動態加載
```
//router.js

//原來的寫法：import Home from '@/components/PC/Home'
//改爲下面這種形式（其餘路由同理）
const Home = () => import('@/components/PC/Home')       
複製代碼
```
ＯＫ，第一次優化完成。讓咱們打包看看結果如何吧。

上面兩張圖分別是本地打包前首屏加載的js資源（經計算大約爲3.1MB）的截圖和打包後的截圖（1.44MB），打包時間爲 55s。注意我紅色框出來的部分，和優化前相比較打包的結果多了幾個以0 1 等數字開頭的js文件，這其實就是咱們的路由文件被分離了出來，首屏只加載了須要的0.js和3.js文件，等到咱們切換到其餘路由的時候纔會加載其餘的2.js或者4.js，而不是像之前那樣所有包含在了app.js中一次性全加載出來。

和優化前相比，打包後大小沒變，可是打包時間減小了，首屏加載的js資源也少了0.1MB（坑爹麼不是！！）。

打包體積沒變，首屏才少了0.1MB？效果這麼差，你特麼在逗我？

彆着急打我，聽我解釋。打包體積沒變是由於無論路由怎麼懶加載，實質上須要的路由文件仍是那麼多，大小是不變的，因此體積沒變。而首屏才少了0.1MB，是由於這個項目原本就是個很小的項目，只有4個頁面，並且這個項目的首頁引入了echarts原本就相對來講比較大。

因此說這一步路由懶加載的優化是徹底ok的，效果很差是由於是我項目的緣由，少了的那0.1MB是剩餘未加載的路由文件大小。

若是你的項目有不少個頁面，那麼路由懶加載的效果應該會不差。

咱們再次看看這個圖

發現左邊黃色的框echarts和右邊藍色的框element-ui體積佔了大頭，咱們先看element-ui佔了556KB，如今開始針對element-ui進行第二次優化
第二次優化：element-ui組件按需加載

針對element-ui的優化，沒啥好說的，具體作法，直接看文檔裏面的按需引入吧。照着文檔優化了之後，再次打包查看結果：

此次優化後，打包用了45s，總大小由1.44MB變成了1.16MB

並且element-ui模塊所佔的大小也由556kb變成了267kb，效果還行。可是這點提高怎麼知足的了我？解決了element-ui，咱們看看另一個模塊echarts:

比element-ui還要過度！！足足佔了606kb，立刻針對最大的boss----echarts進行優化。

第三次優化：使用 CDN 外部加載資源

此次優化主要是針對echarts，在其文檔裏也有提到按需加載,可是此次咱們不用按需加載了，我想把echarts完全乾掉！咱們此次要使用webpack的externals，參考這裏

防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。具備外部依賴(external dependency)的 bundle 能夠在各類模塊上下文(module context)中使用，例如 CommonJS, AMD, 全局變量和 ES2015 模塊。

具體作法：

首先在index.html中引入echarts的外部CDN（若是須要地圖組件，也須要一併引入）

//index.html
<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
複製代碼

而後在webpack.base.config.js中,作以下改動

//webpack.base.config.js   module.exports中增長externals對象
module.exports = {
    externals: {
        "echarts": "echarts"        //默認是配置引用的庫（這裏是echarts）暴露出的全局變量
    },
}
複製代碼

查看優化結果:

這是打包前的本地首屏加載資源的截圖，可算出此次一共加載了1.31MB（沒有算上echarts.min.js，由於那是CDN資源）,相對於第一次優化後的3.1MB已經少了不少了。

打包後的截圖以下

能夠看到打包後的體積只有434.7KB,並且此次打包只花了34s，最重要的是echarts也真的被幹掉了！！

驚不驚喜！！意不意外！！

各次優化的表格

懶得看圖的同窗能夠直接看下面這張表格

#	打包後體積	壓縮後體積	首屏js資源	打包耗時
優化前	1.44M	425K	3.2M	72s
第一次優化（路由懶加載）	1.44M	434K	3.11M	55s
第二次優化（element-ui按需加載）	1.16M	381K	1.3M	45s
第三次優化（引入外部CDN）	434K	121K	1.3M	34s

能夠看出，咱們的優化仍是頗有成效的，各類體積和打包耗時差很少減小了70% 左右。

總結

這部分必定要看啊啊啊

遇到webpack打包性能問題，先執行npm run build --report分析一波，而後根據分析結果來作相應的優化，誰佔體積大就幹誰
路由不少的複雜頁面，路由懶加載是確定要作的
如今不少庫都有提供按需加載的功能，有須要的話能夠按照官方文檔的作法來按需加載
webpack提供的externals能夠配合外部資源CDN輕鬆大幅度減小打包體積，適用於echarts、jQuery、lodash這種暴露了一個全局變量的庫
千萬不要忘了開啓Gzip壓縮
本文講的只是針對於webpack層面的優化，性能優化不僅這些，還有其餘方面的優化，好比頁面渲染優化（減小重排）、網絡加載優化等。
本文的內容只適用於瀏覽器環境