More than 5 years have passed since last update.

株式会社モバイルファクトリー

hard-source-webpack-pluginを使ってみた

webpack

Last updated at 2018-01-18Posted at 2018-01-18

概要

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]