Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.
  • 2018/3/29 キャッシュで問題が起こったときに、キャッシュを削除する方法を追記しました。

概要

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

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

上記の記事によると、DLL と HardSourcePlugin を両方追加すると良い、と書かれてます。
残念ながら手元の環境では DLL はビルド時にエラーが起こったので採用を見送りましたが1、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だから? 

kmdsbng
京都で働いてるプログラマです
http://twitter.com/kmdsbng
mmj
ウェブシステム開発やサービスを運営している京都の会社です。Kotlin, TypeScript, Reactを中心とした開発体制への移行をしています。 その前はRuby on Rails を中心に開発をしていました。
https://www.mmj.ne.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away