概要
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も入っていないので、それぞれ以下のバージョンで導入します。
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を適用してみます。
{
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')]
},
function generateLoaders (loader, loaderOptions) {
var loaders = ['cache-loader', cssLoader]
hard-source-webpack-plugin
pluginsに追加するだけ。とってもシンプル。
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使ってるけどもっと早くしたいよという場合であれば試験的に導入してみるのもいいかもしれないです。
また、今回は測定だけで中身まで見ていないので機会があれば実装も覗いてみたいと思います。