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

77rou發表於2017-12-26

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/,如需轉載,請註明出處,否則將追究法律責任。

相關文章