優化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年在中國設立研發中心,在全球化產品的研發過程中,不斷適應中國市場的本地需求,並為軟件企業和各行業的信息化提供優秀的軟件工具和咨詢服務。
優化Webpack構建性能的幾點建議