優化Webpack構建效能的幾點建議

77rou發表於2017-12-26
優化Web

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 使用優化

轉載請註明出自：葡萄城控制元件


關於葡萄城

葡萄城成立於1980年，是全球最大的控制元件提供商，世界領先的企業應用定製工具、企業報表和商業智慧解決方案提供商，為超過75%的全球財富500強企業提供服務。葡萄城於1988年在中國設立研發中心，在全球化產品的研發過程中，不斷適應中國市場的本地需求，併為軟體企業和各行業的資訊化提供優秀的軟體工具和諮詢服務。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28298702/viewspace-2149276/，如需轉載，請註明出處，否則將追究法律責任。

相關文章