概要

webpackのビルド時間短縮するためにthread-loaderやcache-loaderを使ったり、一部のモジュールをDLLPluginでバンドルに固めたりすると思います。

最近、モジュールの中間キャッシュを利用するhard-source-webpack-pluginを見つけて気になっていたので使ってみました。

TL;DR

サンプルアプリで使ってみたところ、cache-loaderに比べてビルドは速かった

準備

cache-loaderを利用した場合とビルド速度を比べてみます。

ビルド時間の測定のために、vue2+vuexで作られたvue-spaというSPAサンプルアプリを利用します。
もちろん、このプロジェクトにはcache-loaderもhard-source-webpack-pluginも入っていないので、それぞれ以下のバージョンで導入します。

version

cache-loader => 1.2.0
hard-source-webpack-plugin => 0.5.15

いずれも5回連続でビルドしてみます。

cache-loader

READMEにキャッシュのr/wにオーバーヘッドがあるので重いローダーにのみ使うべきとあります。ただ、イマイチどれが重たいのか分からないのでとりあえずbabel-loader,vue-loader,css-loaderにcache-loaderを適用してみます。

build/webpack.base.conf

{
  test: /\.vue$/,
  use: ['cache-loader',{ loader: 'vue-loader', options: vueLoaderConfig }]
},
{
  test: /\.js$/,
  use: ['cache-loader', 'babel-loader?cacheDirectory'],
  include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},

build/util.js

function generateLoaders (loader, loaderOptions) {
   var loaders = ['cache-loader', cssLoader]

hard-source-webpack-plugin

pluginsに追加するだけ。とってもシンプル。

build/webpack.prod.conf

plugins: [
  new HardSourceWebpackPlugin()
]

測定結果(`yarn build`)

素の状態

	1回目	2回目	3回目	4回目	5回目
ビルド速度(s)	14.38	13.75	14.09	13.80	13.84

だいたい14sくらい

cache-loader

	1回目	2回目	3回目	4回目	5回目
ビルド速度(s)	14.17	12.30	12.23	12.18	11.94

1回目以降は12sくらいでちょっと速い

hard-source-webpack-plugin

	1回目	2回目	3回目	4回目	5回目
ビルド速度(s)	15.80	8.80	8.57	8.71	8.22

初回はconfigHashを作るためか素の状態に比べて少し遅いですが、2回目以降は9sほどでたしかに速いです

まとめ

cahce-loaderに比べてビルドが速かったです。

ただ、READMEにも書かれているとおりwebpack-dev-serverを使う際に注意しなければいけない点があったり、他のプロジェクトで導入してみたところビルドが正常に終了しなかったりと不安定さを感じます。

実際にプロジェクトに本導入するまでとはいかないかもしれませんが、cache-loader使ってるけどもっと早くしたいよという場合であれば試験的に導入してみるのもいいかもしれないです。

また、今回は測定だけで中身まで見ていないので機会があれば実装も覗いてみたいと思います。