vue-cli3 專案框架最佳化(OneLine周分享)

vue專案最佳化的背景

為了開發方便及效率，我們經常使用官方的腳手架來構建專案。基於vue的專案，我們透過vue-cli3 來構建。但是隨著專案需求的不斷增加。程式碼量也隨之增大。檔案大小也隨著增加。開發上，漸漸的出現相關的問題，這一情況就變得異常棘手。我們也需要找到解決辦法，來解決這件事情，提高開發效率及專案的執行效率。

以往專案的最佳化

在考慮最佳化之前，我們來看下在前後端分離還沒有那麼異常流行的時候，我們需要對專案做什麼樣的最佳化。在以往的專案中，我們的程式碼基本都是透過服務端渲染方式來響應給使用者（這也符合seo）。在這種專案中，程式碼的組織方式，都是由開發人員控制（當然現在也是一樣，只是加入了工具的處理），按照自己的需要引入相關的程式碼庫。程式碼的編寫及組織，基本都是按照團隊規範來處理，以便後期的擴充套件和維護。因此在頁面中需要什麼樣的指令碼或者樣式，及圖片等資源都是按需引入。那程式碼的最佳化，就主要表現在：

js，css程式碼公用程式碼提取，按照需要引入

js，css程式碼的最小化壓縮

圖片檔案的壓縮

gzip的壓縮

等等相關的最佳化。這裡我們就暫時不考慮其他效能的處理：懶載入，快取等等。效能的處理，不同的專案最佳化方式也是不一樣的。離開專案的效能最佳化，其實都是沒有說服力。某個效能最佳化方案在這個專案適合，另外一個專案可能就不合適了。

vue-cli3的最佳化

vue-cli3主要還是建立在webpack和webpack-dev之上的。所以最佳化的重點，也應該是透過學習webpack相關的配置，來最佳化我們的程式碼。在vue-cli3中有兩種方式來配置webpack： chainWebpack 和configureWebpack。

chainWebpack的方式可以檢視官方教程。 configureWebpack的話直接看webpack的官方教程。再配合看vue-cli3的官方文件，現在我們來思考實際的最佳化方式。首先新建一個vue。config。js配置檔案，程式碼如下：

module。exports = {}

在最佳化之前，我們先看看最佳化專案的程式碼情況：這裡的專案是我寫的一個demo，使用了element-ui來做介面。

單個檔案已經達到了8。5M，這個是非常可怕的。因此我們必須下定決心來做相關的最佳化，減少檔案的大小。

1. 最小化處理: 程式碼的最最佳化, 我們會透過chainWebpak來處理.

在這一小節中，主要使用的是webpack配置中的optimization來完成相關的最佳化。我們重點關注下檔案的響應程式碼： app。js檔案的返回程式碼：

app。js程式碼是沒有做任何最佳化的，為此我們來著手解決這一問題：我們需要最小化相關程式碼，配置如下：

module。exports = { chainWebpack： config => { config。optimization。minimize（true）； }}

然後重新執行我們的專案，再來觀察程式碼的執行效果。

檔案大小已經減少到8。4M，然後看到的原始碼也是被壓縮過了。其他的檔案大小也是相應的減少了（我們在這篇文章中，主要關注檔案過大的）。大家也可以看看自己的專案檔案情況。

2. 分割程式碼

分割程式碼也是我們需要重點操作的步驟：利用webpack的SplitChunksPlugin來完成。引數的配置，可以參考官方的。這裡我們使用預設的配置（細節最佳化，各自根據自己的需要調整）。要注意的就是官方的說明：

module。exports = { chainWebpack： config => { config。optimization。minimize（true）； config。optimization。splitChunks（{ chunks： ‘all’ }） }}

這一波操作之後，程式碼檔案分割了出來，單個檔案最大變成了7。4M，做到了檔案大小的減少。為了瞭解為什麼檔案還是在M的單位，我們可以繼續設定splitChunks的引數，瞭解哪個模組會更大（這裡可以觀看影片中的配置）我這裡就不帶大家去設定了，自行解決，這樣也可以讓自己更瞭解和熟悉這些配置引數。

注意：

參考splitChunks外掛的配置：最小檔案大小，最大檔案大小，設定非同步方式，還有模組的快取設定，名稱的設定等等。但是一定要平衡檔案大小和檔案數量。數量多了，請求也會變慢的，影響效能。不過大家可以親自動手設定符合自己的專案引數，檢視專案的效果。我這裡的話，就只設置成這樣了，避免檔案數量的增加了（以後專案隨著增大，也會繼續做相關的最佳化）。

3. 提取公用程式碼, 使用免費的cdn資源.

首先我們要思考：為什麼會有個檔案會如此之大？這個檔案會這麼大，最主要是我們引入了不同的模組庫，比如vue， vuex， vue-router， element-ui等公共資源庫。那我們是否可以將他們提取出來？答案是肯定。需要使用externals引數來配置，配置如下：

module。exports = { chainWebpack： config => { config。optimization。minimize（true）； config。optimization。splitChunks（{ chunks： ‘all’ }） config。externals（{ vue： ‘vue’， vuex： ‘vuex’， ‘vue-router’： “‘vue-router’”， ‘element-ui’： “‘element-ui’” }） }}

透過externals引數來忽略我們這些模組的打包。然後我們重新執行專案，看看效果。

我們的程式碼已經減少到2。8M。但是這裡有個問題，就是我們的程式碼沒有執行起來，丟擲了異常。因為我們需要將vue， vuex，vue-router等引入到專案介面中，需要對html做一下處理。這裡我們引入網路上的免費資源，就不下載相關程式碼放到專案中了，這樣也減少我們伺服器的壓力。

在index。html頁面加入這些連結。然後我們執行效果看下。

4. 提取css程式碼, 到單個檔案中.

專案最佳化到這一步，你們有沒有發現：專案的請求中，沒有看到css的請求。那是因為css程式碼都已嵌入到js檔案中，在執行js程式碼的時候，會動態的將css程式碼生成style標籤。這也是造成檔案過大的原因之一。這時候我們需要提取css程式碼到檔案中，只需要將css配置一下：

module。exports = { css： { extract： true }， chainWebpack： config => { config。optimization。minimize（true）； config。optimization。splitChunks（{chunks： ‘all’}） config。externals（{ vue： ‘Vue’， vuex： ‘Vuex’， ‘vue-router’： “VueRouter”， ‘element-ui’： “‘element-ui’” }） }}

然後執行專案，效果如下（css的配置可以看官方的文件）。

有沒有發現，我們的程式碼在繼續減少。已經減少到2。3m，其他都是以k為單位了。 css檔案的請求也出現在了面板中。為了減少css檔案的大小，還得需要提取一個css檔案，那就是單獨分離element-ui的樣式檔案。我們現在用的是本地引入element-ui的樣式，也需要改為免費資源引入的形式

這裡我們需要把它註釋掉。然後在html檔案中，加入免費資源：

然後再執行專案。找到一個vendor開頭的css檔案，這裡從205k減少到8。3k

注意到的是：我們這裡還有2。3M的大檔案，我們得繼續最佳化。

之所以檔案還有這麼大，是因為還引入了vue-codemirror這個元件。同樣我們需要將這個元件單獨提取出來。透過使用免費資源解決：配置跟vue， vuex， vue-router這種方式一樣，我們就不再詳細說明（忘記的，可以往前面章節瞭解）。這個元件用到了codemirror的樣式。也需要引入進來。最後的效果。

經過上面的步驟，效果還是比較明顯的，最大檔案已經是1。4M了。這裡我們解釋一下，還有1。4M的原因：裡面的程式碼包含了核心的js，相容式的程式碼等公用的相關程式碼。這些我們就沒必要去做提取了。

還有就是，我們這裡使用的是開發環境的模式，其實有些程式碼是多出來的：比如熱載入， webpack-dev-server這些外掛。

5. gzip壓縮.

gzip壓縮，是目前常用到的壓縮方式。就單純基於專案效果而言，我們引入一個外掛： compression-webpack-plugin，來完成js檔案的壓縮。

安裝該外掛：

npm install ——save-dev compression-webpack-plugin

然後引入相關程式碼：

const CompressionWebpackPlugin = require（‘compression-webpack-plugin’）const compress = new CompressionWebpackPlugin（ { filename： info => { return `${info。path}。gz${info。query}` }， algorithm： ‘gzip’， threshold： 10240， test： new RegExp（ ‘\\。（’ + ［‘js’］。join（‘|’） + ‘）$’ ）， minRatio： 0。8， deleteOriginalAssets： false }）module。exports = { css： { extract： true }， configureWebpack： { plugins：［compress］ }， chainWebpack： config => { config。optimization。minimize（true）； config。optimization。splitChunks（{chunks： ‘all’}） config。externals（{ vue： ‘Vue’， vuex： ‘Vuex’， ‘vue-router’： “VueRouter”， ‘element-ui’： “‘element-ui’” }） }}

為了看效果，這裡我們只做js檔案的gzip。專案執行後會生成一個。gz的檔案。

重新啟動專案後，是無法看到效果的。因為沒有將gz檔案傳送給瀏覽器解析。我們需要配置下伺服器。我們這樣做的目的，是為了更好的瞭解到： gzip壓縮後，檔案的壓縮效果。在這裡我們還需要加入devServer的配置：

注意：目前現在的應用伺服器，比如Nginx， apache等都是支援gzip壓縮的。如果架設到這樣的伺服器上，是不需要透過這個外掛來壓縮。我們啟用他們自身的gzip功能就可以了。

const compress = new CompressionWebpackPlugin（ { filename： info => { return `${info。path}。gz${info。query}` }， algorithm： ‘gzip’， threshold： 10240， test： new RegExp（ ‘\\。（’ + ［‘js’］。join（‘|’） + ）$‘）， minRatio： 0。8， deleteOriginalAssets： false }）module。exports = { devServer： { before（app， server） { app。get（/。*。（js）$/，（req， res， next） => { req。url = req。url + ’。gz‘； res。set（’Content-Encoding‘， ’gzip‘）； next（）； }） } // compress： true }， css： { extract： true }， configureWebpack： { plugins：［ compress ］ }， chainWebpack： config => { config。optimization。minimize（true）； config。optimization。splitChunks（{chunks： ’all‘}） config。externals（{ vue： ’Vue‘， vuex： ’Vuex‘， ’vue-router‘： “VueRouter”， ’element-ui‘： “’element-ui‘”， “vue-codemirror”： “’vue-codemirror‘” }） }}

然後重新啟動專案，這時候你就會發現我們的Js檔案已經壓縮了，從1。4M的檔案到300多k。效果是很明顯的。