webpack: ハードソース webpack プラグイン速度の最適化

1. 背景

  在项目实现的过程中，想在代码更改的同时，查看效果的改变，而这个时候长时间的编译等待，造成了额外的时间浪费。

2. はじめに

HardSourceWebpackPlugin は、モジュールの中間キャッシュステップを提供する Webpack のプラグインです。結果を確認するには、このプラグインを使用して webpack を 2 回実行する必要があります。最初のビルドには通常の時間がかかります。2 番目のビルドは大幅に高速になります (おそらく 90% 高速なビルド)。

3. 実現する

インストール: 糸追加 --dev ハードソース webpack-plugin (または npm を使用)。
そして、このプラグインを webpack のプラグイン設定に追加します。
ファイル パス: build/webpack.dev.conf.js:

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
...
module.exports = merge(baseWebpackConfig, {
    
    
  module: {
    
    
    rules: utils.styleLoaders({
    
     sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
  	...
    // 缓存 加速二次构建速度
    new HardSourceWebpackPlugin({
    
    
      // Either an absolute path or relative to webpack's options.context.
      //  cacheDirectory是在高速缓存写入 ，设置缓存在磁盘中存放的路径
      cacheDirectory: './../disk/.cache/hard-source/[confighash]',
      // Either a string of object hash function given a webpack config.
      recordsPath: './../disk/.cache/hard-source/[confighash]/records.json',
      //configHash在启动webpack实例时转换webpack配置，并用于cacheDirectory为不同的webpack配置构建不同的缓存
      configHash: function (webpackConfig) {
    
    
        // node-object-hash on npm can be used to build this.
        return require('node-object-hash')({
    
     sort: false }).hash(webpackConfig);
      },
      // Either false, a string, an object, or a project hashing function.
      environmentHash: {
    
    
        root: process.cwd(),
        directories: [],
        files: ['./../package-lock.json', './../yarn.lock'],
      },
      // An object.
      info: {
    
    
        // 'none' or 'test'.
        mode: 'none',
        // 'debug', 'log', 'info', 'warn', or 'error'.
        level: 'debug',
      },
      // Clean up large, old caches automatically.
      cachePrune: {
    
    
        // Caches younger than `maxAge` are not considered for deletion. They must
        // be at least this (default: 2 days) old in milliseconds.
        maxAge: 2 * 24 * 60 * 60 * 1000,
        // All caches together must be larger than `sizeThreshold` before any
        // caches will be deleted. Together they must be at least this
        // (default: 50 MB) big in bytes.
        sizeThreshold: 100 * 1024 * 1024
      },
    }),
  ]
})

4. 効果: (時間はプロジェクトの構造によって異なります。参考のみとしてください)

1回目のビルド:

2回目のビルド:

結論: ビルド速度が約90%向上しました~~