Webpack 作為目前最流行的前端構建工具之一，在 vue/react 等 Framework 的生態圈中都佔據重要地位。在開發現代 Web 應用的過程中，Webpack 和我們的開發過程和釋出過程都息息相關，如何改善 Webpack 構建打包的效能也關係到我們開發和釋出部署的效率。
以下是一些關於優化 Webpack 構建效能的幾點建議：
一、選擇合適的 Devtool 版本
webpack 的 devtool 配置，決定了在構建過程中怎樣生成 sourceMap 檔案。通常來說eval的效能最高，但是不能生成的 sourceMap 檔案解析出來的程式碼，和原始碼差異較大。 source-map 的效能較差，但是可以生成原始版本的程式碼。 在大多數 Development 場景下 cheap-module-eval-source-map 是最佳的選擇。
下圖是各個 Devtool 配置的對比（+號越多，代表速度越快，-號越多，代表速度越慢, o代表中等速度）
注意* ： 在 production 配置中，如果需要生成 sourceMap 檔案來進行異常分析， 應該使用 hidden-source-map 或者 nosources-source-map, source-map 等配置。並且不要把 sourceMap 檔案也放在部署目錄下。
二、Build Cache
Webpack 和一些 Plugin/Loader 都有 Cache 選項。開啟 Cache 選項，有利用提高構建效能。
比如：使用 babel-loader 的時候開啟 cacheDirectory 選項，會較為明顯的提升構建速度
|
1 2 3 4 5 6 7 |
module: { rules: [{ test: /\.js$/, use: ['babel-loader?cacheDirectory'], include: path.join(__dirname, 'app') }] } |
三、減少程式碼體積
- 使用 CommonsChunksPlugin 提取多個 chunk 之間的通用模組，減少總體的程式碼體積
- 把部分依賴轉移到 CDN 上，避免在每次編譯過程中都由 Webpack 處理
- 對於支援區域性引入的類庫，在開發的過程中使用區域性引入的方式，避免引入無用的檔案
比如 lodash 就支援部分引入：
|
1 |
import isArray from 'lodash/isArray'; |
參考： [Don’t import whole lodash] (https://github.com/lodash/lodash/issues/3450)
在進行這一優化手段的時候，可以藉助視覺化工具進行 chunk 體積和內容的分析。方便進一步調整 webpack 的配置。主要有以下兩種方法：
1. 使用 webpack 的 profile 命令生成 JSON 檔案，並且把 JSON 上傳到相應的線上網站進行視覺化分析。
|
1 2 3 |
```bash webpack --profile --json > stat.json ``` |
使用 webpack-visualizer 進行分析：
2. 使用第三方 plugin，在編譯過程中進行體積分析，並且以圖表方式輸出：
推薦使用 webpack-bundle-analyzer:
四、減少目錄檢索範圍
在使用 loader 的時候，通過指定 exclude 和 incude 選項，減少 loader 遍歷的目錄範圍，從而加快 Webpack 編譯速度。
比如指定 babel-loader 只處理業務程式碼：
|
1 2 3 4 5 |
{ test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'app') } |
五、減少檢索路徑
resolve.alias 可以配置 webpack 模組解析的別名，對於比較深的解析路徑，可以對其配置 alias. 可以提升 webpack 的構建速度。
|
1 2 3 4 |
alias: { Utilities: path.resolve(__dirname, 'src/utilities/'), Templates: path.resolve(__dirname, 'src/templates/') } |
六、使用 DllPlugin/DllReferencePlugin 進行預先構建
Webpack 的 DllPlugin 和 DllReferencePlugin 是在新版本中推出的 Plugin，其思路就是把改變頻率比較小的第三方庫等依賴單獨打包構建，在打包整個專案的時候，如果解析到了通過 Dll 形式進行打包的依賴，會在正常的打包過程中跳過，同時把對這些依賴的引入匯入到 Dll 模組上去。 這樣會大大提升在對業務程式碼進行打包時候的速度。
1. 新建一個單獨的 webpack 配置檔案，比如 webpack.dll.config.js
2. 在這個配置檔案中，使用 webpack DllPlugin 生成 manifest.json 檔案和 Dll 模組檔案。也可以引入諸如 uglifyPlugin 對第三方依賴進行壓縮等處理。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import path from 'path'; import pkg from './package.json'; import webpack from 'webpack'; var vendorPackages = Object.keys(pkg.dependencies); const config = { entry: { vendor: vendorPackages }, output: { filename: 'dll.[name].js', path: path.resolve(__dirname, 'build', 'dll'), library: '[name]' }, plugins: [ new webpack.DllPlugin({ context: __dirname, name: "[name]_[hash]", path: path.join(__dirname, "manifest.json"), }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, minimize: true, cache: true, parallel: true }), ] } export default config; |
3. 在正常的 webpack 配置檔案中，使用 webpack DllReferencePlugin 解析上一步生成的 manifest.json
|
1 2 3 4 |
new webpack.DllReferencePlugin({ context: path.join(__dirname), manifest: require('./manifest.json') }) |
在具體的使用過成中， 在 Dll 中包含的依賴沒有變化的場景下，可以先執行單次 webpack –config webpack.dll.config.js。然後可以多次執行業務程式碼的構建過程。由於把第三方依賴進行了剝離，業務程式碼的構建會快很多。
以下是一些關於 Webpack 構建效能的文章：
4）: webpack 使用優化