webpack のビルド性能を95%改善した方法（Boxの事例）

Box のエンジニアブログに「How we improved webpack build performance by 95%」という記事が投稿されました。
Box では、それまで３時間21分かかっていたビルド時間を9分に短縮させました。

• シングルCPU
  • babel-loader でキャッシュを有効にして26%の性能改善
  • キャッシュを有効にして、 uglifyjs-webpack-plugin v1 で並列処理をして45%の性能改善
  • webpack.config.js から設定一覧をエクスポートしないようにして28%の性能改善
• １０CPU
  • node.js Child Process API を使用して67%の性能改善

ビルドマシンにメモリ制限がある場合、webpack.config.js で設定一覧をエクスポートしない

Webpackはwebpack.config.js から複数の設定をarrayとしてエクスポートできます。
同時に25言語の bundle をビルドするのに、一つのロケールにつき1つで２５設定のarrayをエクスポートするのに、この機能にメリットを感じていました。
小さな設定のみの場合はとても便利な機能なのですが、boxの場合は、ビルドプロセスにメモリと時間を非常に使います。
初期設定で、 –max_old_space_size (memory limit) のnodeプロセスでwebpackを実行するのに４GBにしていましたが、倍の8GBにしたら性能が50%改善し、ビルド時間が3.35時間から1.7時間に減りました。

同じメモリ制限では、各設定でwebpackを実行するように設定を変更すると、同時に複数の設定を処理する場合と比較して、パフォーマンスが約28％向上しました。

babel-loader でキャッシュを有効にする

babel-loader キャッシュは、cacheDirectoryオプションで簡単に有効にできます。

loader: 'babel-loader?cacheDirectory'

デフォルトでは、node_modules/.cache/babel-loaderに、babel-loaderキャッシュ結果が格納されます。
babel-loader キャッシュを有効にした後、ビルド性能が26%改善したました。

新しい uglifyjs-webpack-plugin v1 は大きな違いをもたらします

すでにwebpack 3で提供されている UglifyJSプラグイン（webpack.optimize.UglifyJsPlugin） を使用しているかもしれません。

新しいuglifyjs-webpack-plugin v1を使用して、 UglifyJS v3 で使用してwebpack 4で計画されています。
新しい機能は、複数プロセスで並列処理に対応し、キャッシュを活用しビルド性能を45%改善します。

現時点で、webpack 3で、 uglifyjs-webpack-plugin v1 を使用するためには、

• devDependenciesに、「”uglifyjs-webpack-plugin”: “1.0.1”」を追加する
• webpackから「-p」フラグを消し、「uglifyjs-webpack-plugin v0.4.6」が呼ばれないようにする

キャッシュと並列オプションをプラグインに追加します。

new UglifyJsPlugin({
   cache: true,
   parallel: true
})

マルチコアビルドのメリット

ビルドマシンが複数CPUを持っている場合、 node.js Cluster と Child Process API 、または worcker-fram を使用することでwebpackビルドにメリットがあります。並列に処理される9つのWebpack構成を有効にすることで、25の構成すべてをビルド性能が
67％改善しました。