記一次真實的webpack優化經歷
阿新 • • 發佈：2020-12-22
# 前言
公司目前現有的一款產品是使用`vue v2.0`框架實現的，配套的打包工具為`webpack v3.0`。整個專案大概有`80`多個`vue`檔案，也算不上什麼大型專案。
只不過每次頭疼的就是打包所耗費的時間平均在`一分鐘`左右，而且打包後有幾個檔案顯示為`【big】`，也就是檔案體積過大。
最近就想著搗鼓一下，看能不能在此前的基礎上做一些優化，順帶記錄下來分享給大家。
# webpack打包優化
關於`webpack`的打包優化一般會從兩個方面考慮：`縮短打包時長`和`降低打包後的檔案體積`，這兩個方面也剛好是前面我需要解決的問題。
所以我們先來了解一下這兩個方面各自有什麼具體的實現方式。
## 縮短打包時長
我們都知道`webpack`的執行流程就像一條生產線一樣，在這條生產線上會按順序的執行每一個流程。那很顯然如果每一個流程要乾的事情越少或者每一個流程有多個人來共同完成，那`webpack`打包的執行效率就會提高。
#### `1.減少loader搜尋檔案範圍`
我們可以通過配置`loader`的`exclude`選項，告訴對應的`loader`可以忽略某個`目錄`；或者通過配置`loader`的`include`選項，告訴`loader`只需要處理指定的`目錄`。因為`loader`處理的檔案越少，執行速度就會更快。
一般比較常見的就是給`babel-loader`配置`exclude`選項。
```javascript
// webpack.config.js
module.exports = {
entry: {},
output: {},
plugin: [],
module: {
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ // exclude的值是一個正則
}
]
}
}
```
以上配置即告訴`babel-loader`在轉化`JS`程式碼的時候忽略`node_modules`目錄，這麼配置是因為我們引用`node_modules`下的包基本都是編譯過的，所以不需要在通過`babel-loader`處理。
#### `2.利用快取`
關於`webpack`的快取，官方的大致解釋為：開啟快取以後，`webpack`構建將嘗試從快取中讀取資料，以避免每次執行時都需要執行代價高昂的重新編譯過程。
那如何在編譯程式碼時開啟快取呢？
`◕ cacheDirectory`
第一種是配置`babel-loader`的`cacheDirectory`選項，針對`babel-loader`開啟快取。
```javascript
// webpack.config.js
module.exports = {
entry: {},
output: {},
plugin: [],
module: {
rules:[
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory',
exclude: /node_modules/
}
]
}
}
```
`◕ cache-loader`
第二種是利用`cache-loader`。
首先需要對其進行安裝：`npm install cache-loader --save-dev `；接著在`webpack`中進行配置：
```javascript
// webpack.config.js
module.exports = {
entry: {},
output: {},
plugin: [],
module: {
rules:[
{
test: /\.js$/,
loader: [
'cache-loader',
'babel-loader'
]
exclude: /node_modules/
},
{
test: /\.ext$/,
use: [
'cache-loader',
// 其他的loader
// ...
],
}
]
}
}
```
對於`cache-loader`官方給出的使用建議為：`在一些效能開銷較大的loader之前新增此loader，以將結果快取到磁盤裡；儲存和讀取這些快取檔案會有一些時間開銷，所以請只對效能開銷較大的loader使用此 loader`。
> 可以簡單粗暴的認為如果一個`loader`在執行過程中處理的任務較多，較為耗時，即判定此`loader`效能開銷較大。我們就可以嘗試給該`loader`開啟快取，當然如果開啟快取以後實際的`打包時長`並沒有降低，則說明開啟快取對該`loader`的效能影響不大。
> 更多有關`cache-loader`的內容可以檢視：`https://www.webpackjs.com/loaders/cache-loader/`
`◕ hard-source-webpack-plugin`
第三種是開啟快取的方式是使用`hard-source-webpack-plugin`。它是一個`webpack`外掛，安裝命令為：`npm install --save-dev hard-source-webpack-plugin`；最基礎的配置如下：
```javascript
// webpack.config.js
// 引入
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
// 只在生產環境下開啟HardSourceWebpackPlugin
if (process.env.NODE_ENV === "production") {
module.exports.plugins = (module.exports.plugins || []).concat([
new HardSourceWebpackPlugin()
])
}
```
> 更多有關`hard-source-webpack-plugin`的用法可以檢視：`https://github.com/mzgoddard/hard-source-webpack-plugin`
以上三種`開啟快取`的方式雖然各不相同，但只要做了配置就可以在我們的磁碟中看到它們的快取結果。
#### `3.多執行緒`
多執行緒也就是將一件事情交給多個人去做，從理論上來講是可以提高一件事情的完成效率。
`◕ happyhack`
我們都知道受限於`node`的`單執行緒`模式，`webpack`的整個`執行`和`構建`過程也是`單執行緒`模式的。
所以第一種開啟`多執行緒`的方式就是將`webpack`中`loader`的執行過程從`單執行緒`擴充套件到`多執行緒`。這種方式的具體實現依賴的是`HappyPack`外掛。
使用`happypack`的第一步依然是安裝：`npm install --save-dev happypack`；最簡單的配置如下：
```javascript
// webpack.config.js
// 引入
const HappyPack = require('happypack');
module.exports = {
entry: {},
output: {},
plugin: [],
module: {
rules:[
{
test: /\.js$/,
// 使用loader調起happypack
loader: 'happypack/loader',
exclude: /node_modules/
}
]
}
}
// 只有在生產環境下配置對應的happypack
if (process.env.NODE_ENV === "production") {
module.exports.plugins = (module.exports.plugins || []).concat([
new HappyPack({
// re-add the loaders you replaced above in #1:
loaders: 'babel-loader',
})
])
}
```
這樣的配置表示匹配到的`.js`原始碼將被傳遞給`HappyPack`，`HappyPack`將使用`loaders`指定的載入器（本例中是`babel-loader`）並行地轉換它們。
這種最基礎的配置，預設是`3`個執行緒並行處理。同時我們也可以通過配置`thread`選項，自定義執行緒個數。
```javascript
// webpack.config.js
new HappyPack({
// re-add the loaders you replaced above in #1:
loaders: 'babel-loader',
// 自定義執行緒個數
threads: 2,
})
```
關於`執行緒`的設定，官方推薦使用`共享執行緒池`的方式來控制`執行緒個數`：`However, if you're using more than one HappyPack plugin it can be more optimal to create a thread pool yourself and then configure the plugins to share that pool, minimizing the idle time of threads within it.（但是，如果您使用多個HappyPack外掛，那麼最好自己建立一個執行緒池，然後配置這些外掛來共享該池，從而最大限度地減少其中執行緒的空閒時間。）`
`執行緒池`的建立也很簡單：
```javascript
// webpack.config.js
const happyThreadPool = HappyPack.ThreadPool({ size: 4 });
```
除了可以通過上面的這種方式建立具體的執行緒數，也可以根據`CPU`的核數建立：
```javascript
// webpack.config.js
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length-1 });
```
`執行緒池`建立好了以後，通過`threadPool`進行指定`共享執行緒池`：
```javascript
// webpack.config.js
// 此處省略一些程式碼
new HappyPack({
// re-add the loaders you replaced above in #1:
loaders: 'babel-loader',
// 使用共享執行緒池
threadPool: happyThreadPool
})
```
最後一個實用的配置項是`verbose`選項，可以讓`happypack`輸出執行日誌：
```javascript
// webpack.config.js
// 此處省略一些程式碼
new HappyPack({
// re-add the loaders you replaced above in #1:
loaders: 'babel-loader',
// 使用共享執行緒池
threadPool: happyThreadPool,
// 輸出執行日誌
verbose: true
})
```
> 更多有關`HappyPack`的內容的可以檢視：`https://github.com/amireh/happypack`
不過這裡很遺憾的是該外掛的作者在`github`上面宣佈他本人不會在對該專案進行更新維護了。
`◕ thread-loader`
`thread-loader`和`happypack`類似，也是通過擴充套件`loader`的處理執行緒來降低打包時間。安裝命令：`npm install thread-loader --save-dev`；最簡單的配置如下：
```javascript
// webpack.config.js
module.exports = {
entry: {},
output: {},
plugin: [],
module: {
rules:[
{
test: /\.js$/,
loader: [
'thread-loader',
'babel-loader'
]
exclude: /node_modules/
}
]
}
}
```
即將`thread-loader`配置到其他的`loader`之前即可。
> 更多有關`thread-loader`的內容可以檢視：`https://www.webpackjs.com/loaders/thread-loader`
`◕ webpack-parallel-uglify-plugin`
一般我們為了減少打包後的檔案體積，會對檔案進行壓縮，比如`刪除換行`、`刪除中註釋`等。那常見的就是對`JS`進行壓縮，最基本的就是使用`webpack`官方提供的`uglifyjs-webpack-plugin`外掛；不過該外掛是單執行緒壓縮程式碼，效率相對來說比較低。而`webpack-parallel-uglify-plugin`就是一款`多執行緒`壓縮`js`程式碼的外掛；
安裝命令：`npm install webpack-parallel-uglify-plugin`；簡單的配置如下：
```javascript
// webpack.config.js
// 引入 ParallelUglifyPlugin 外掛
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
// 只在生產環境中配置ParallelUglifyPlugin
if (process.env.NODE_ENV === "production") {
new ParallelUglifyPlugin({
workerCount: 4,//開啟幾個子程序去併發的執行壓縮。預設是當前執行電腦的cPU核數減去1
cacheDir: './cache/',
uglifyJs:{
output:{
beautify:false,//不需要格式化
comments:false,//不保留註釋
},
compress:{
warnings:false,// 在Uglify]s除沒有用到的程式碼時不輸出警告
drop_console:true,//刪除所有的console語句，可以相容ie瀏覽器
collapse_vars:true,//內嵌定義了但是隻用到一次的變數
reduce_vars:true,//取出出現多次但是沒有定義成變數去引用的靜態值
}
}
}),
}
```
之後在進行打包，可以顯著提升`JS`程式碼的壓縮效率。
> 這個外掛的使用一定要注意`版本`的問題，如果配置以後在構建程式碼時出現問題，可以嘗試更換低版本。
> 本次我的`webpack`版本為`v3.6`，直接安裝的`webpack-parallel-uglify-plugin`版本為`v2.0.0`。後面打包出現錯誤，於是將其版本降低為`0.4.2`後就可以正常打包。
關於`多執行緒`我們特別需要注意，並不是`執行緒數量`越多構建時間就越短。因為子執行緒處理完成後需要將把結果傳送到`主程序`中，`主程序`在進行彙總處理，這個過程也是需要耗費時間的。所以最適合的執行緒數量可以嘗試通過實踐去獲得。
#### `4.動態連結庫`
一般我們在打包一個`vue`專案時，會將`vue`、`vue-router`、`axios`等這些外掛的程式碼跟我們的程式碼打包到一個檔案中，而這些`外掛`的程式碼除非版本有變化，否則程式碼內容基本不會發生變化。所以每次在打包專案時，實際上都在重複打包這些外掛的程式碼，很顯然浪費了很多時間。
關於`動態連結庫`這個詞實際上借用的是作業系統中的`動態連結庫`概念，`webpack`的具體實現也就是把前面我們描述的那些`外掛`分別打包成一個獨立的檔案。當有模組需要引用該外掛時會通過生成的`json`檔案連結到對應的外掛。這樣不管是我們在`開發環境`還是在`生成環境`下的打包構建，都不需要在對這些外掛做重複的處理。那接下來我們看看`動態連結庫`的配置和使用。
首先我們需要新建一個`webpack.dll.config.js`，該檔案本身是一個`webpack`配置檔案，主要用於分離第三方外掛。
```javascript
// webpack.dll.config.js
const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const DllPlugin = require('webpack/lib/DllPlugin');
// 分離出來的第三方庫檔案存放的目錄
const dllPath = "webpackDLL";
module.exports = {
// 入口檔案 入口處配置需要分離的第三方外掛
entry: {
echarts: ['echarts'], // 該配置表示分離echarts外掛
},
// 輸出檔案
output: {
path: path.join(__dirname, dllPath), // 分離出來的第三方外掛儲存位置
filename: "[name]-dll.[hash:8].js", // 分離出來的第三方外掛檔名稱
library: '_dll_[name]' // 第三方外掛的名稱，後續其他模組需要引用該外掛，便用該名稱進行引用
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
},
plugins: [
// 清除之前的dll檔案
new CleanWebpackPlugin(),
// 使用DLLPlugin進行分離
new webpack.DllPlugin({
// 生成的 *.manfest.json 檔案的路徑
path: path.join(__dirname, dllPath, "[name]-manifest.json"),
// 這裡的name需要和前面output.library配置一致
// 之後生成的*.manfest.json 中有一個name欄位，值就是我們這裡配置的值
name: '_dll_[name]',
})
]
};
```
關於上面各個`配置項`的含義已在註釋中說明。接下來我們先用這個配置項做一個打包，看一下結果。在這之前我們需要在`package.json`中新增一個`script`指令碼。
```javascript
// package.json
{
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port 4500 --host 192.168.1.10",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"dll": "webpack -p --progress --config ./webpack.dll.config.js"
}
}
```
新增的`dll`指令碼會使用`webpack.dll.config.js`作為配置檔案執行打包任務。
指令碼執行成功以後，本地已經生成了對應的目錄和檔案。
其中`echarts.dll.2a6026f8.js`就是我們分離出來的`echarts`外掛，`echarts-manifest.json`就是前面我們說的`json`檔案。
第三方庫檔案分離後，當有模組需要引用`echarts`時，該如何引用到對應的`echarts.dll.2a6026f8.js`檔案呢?
此時就需要`DllReferencePlugin`出場了：通過配置`DllReferencePlugin`的`manifest`檔案來把依賴的模組名稱對映到對應的外掛。這一步需要在`webpack.config.js`中進行配置：
```javascript
// webpack.config.js
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin')
module.exports = {
entry: {},
output: {},
module: {},
plugin: [
new DllReferencePlugin({
// manifest 就是之前打包出來的 *.manifest.json 檔案
manifest: path.join(__dirname, 'webpackDll', 'echarts-manifest.json'),
}),
]
}
```
以上配置完成後，如果我們處於`開發環境`，執行`npm run dev`開啟`瀏覽器`會發現頁面無法正常顯示，且控制檯有報錯資訊：
這裡是因為我們還需要在入口模板檔案`index.html`中手動引入分離出來的`外掛`檔案。
```html
<%= htmlWebpackPlugin.options.title %>