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 選項，會較為明顯的提升構建速度

 module: {
    rules: [{
        test: /\.js$/,
        use: ['babel-loader?cacheDirectory'],
        include: path.join(__dirname, 'app')
    }]
 }

三、減少代碼體積

• 使用 CommonsChunksPlugin 提取多個 chunk 之間的通用模塊，減少總體的代碼體積
• 把部分依賴轉移到 CDN 上，避免在每次編譯過程中都由 Webpack 處理
• 對于支持局部引入的類庫，在開發的過程中使用局部引入的方式，避免引入無用的文件

比如 lodash 就支持部分引入：

import isArray from 'lodash/isArray';

參考： [Don't import whole lodash] (https://github.com/lodash/lodash/issues/3450)

​在進行這一優化手段的時候，可以借助可視化工具進行 chunk 體積和內容的分析。方便進一步調整 webpack 的配置。主要有以下兩種方法：

1. 使用 webpack 的 profile 命令生成 JSON 文件，并且把 JSON 上傳到相應的在線網站進行可視化分析。

```bash
webpack --profile --json > stat.json
```

使用 webpack-visualizer 進行分析：

2. 使用第三方 plugin，在編譯過程中進行體積分析，并且以圖表方式輸出：

推薦使用 webpack-bundle-analyzer:

四、減少目錄檢索范圍

在使用 loader 的時候，通過指定 exclude 和 incude 選項，減少 loader 遍歷的目錄范圍，從而加快 Webpack 編譯速度。

比如指定 babel-loader 只處理業務代碼：

{
   test: /\.js$/,
   use: ['babel-loader'],
   include: path.join(__dirname, 'app')
}

五、減少檢索路徑

resolve.alias 可以配置 webpack 模塊解析的別名，對于比較深的解析路徑，可以對其配置 alias. 可以提升 webpack 的構建速度。

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 對第三方依賴進行壓縮等處理。

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

new webpack.DllReferencePlugin({
        context: path.join(__dirname),
        manifest: require('./manifest.json')
})

在具體的使用過成中， 在 Dll 中包含的依賴沒有變化的場景下，可以先執行單次 webpack --config webpack.dll.config.js。然后可以多次執行業務代碼的構建過程。由于把第三方依賴進行了剝離，業務代碼的構建會快很多。

以下是一些關于 Webpack 構建性能的文章：

1)：使用 DllPlugin 提升性能

2）: PrefetchPlugin 的使用

3）: webpack 打包分析與性能優化

4）: webpack 使用優化

轉載請注明出自：葡萄城控件

相關閱讀：

基于低代碼平臺（Low Code Platform）開發中小企業信息化項目
SoapUI實踐：自動化測試、壓力測試、持續集成
圖表（Chart & Graph）你真的用對了嗎？