webpackのビルドを10倍高速化するプラグインの紹介

• 2018/3/29 キャッシュで問題が起こったときに、キャッシュを削除する方法を追記しました。

概要

TypeScript + React + Webpack で開発しているフロントエンドプログラムのビルド時間が、ファイルが増えるのに従ってどんどん長くなって来ていたのですが、その問題を解決するWebpackプラグインを見つけたので紹介します。

情報元: 0–100 in two seconds — speed up webpack

上記の記事によると、DLL と HardSourcePlugin を両方追加すると良い、と書かれてます。
残念ながら手元の環境では DLL はビルド時にエラーが起こったので採用を見送りましたが¹、HardSourcePlugin は導入に成功し、ビルド時間を 105sec -> 10sec (!!!) に減らすことができました。

HardSourceWebpackPlugin

READMEによると、HardSourcePlugin は中間キャッシュを作ることでビルド時間短縮を実現しているとのことです。

導入手順

• HardSourcePluginをインストール

npm install --save hard-source-webpack-plugin

• webpack.config.js に追記

// webpack.config.js
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  context: // ...
  entry: // ...
  output: // ...
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

実行してみる

npm start や npm run build を普段通り実行すればOKです。
1回目の実行ではキャッシュを作るために普段と同じくらい時間がかかりますが、うまくいけば2回目の実行からは劇的に速くなるはずです。

webpackのビルド時間が長くなって困っている方は一度お試しください。

キャッシュ絡みの問題が起こったときに、キャッシュを消す方法 (バッドノウハウ)

hard-source-webpack-plugin を使ってると、たまにキャッシュが正しくないためにエラーが起こってしまうケースに度々遭遇します。

ビルドは通ってるのに、ブラウザ上で関数が見つからないとランタイムエラーが表示される、などです。

そういうときは一度キャッシュを削除してやると、正しく動きます。

キャッシュは node_modules/.cache/hard-source に格納されています。キャッシュで問題が起こったら、このディレクトリを削除してみてください。

注釈

1. Windowsだから？ ↩