Nuxt.js でビルド時間を100倍高速化して作業時間が大幅upした件（HardSourceWebpackPluginの紹介）

概要

現在、Nuxt.js(v1.4.1) で開発しているサイトが「お客様ヘルプ」系のサイトなので文字数が多く、また語録やQAが増える毎にファイルが増える画面構成で、プログラムのビルド時間がどんどん長くなって来ました。1文字変えただけでコマンド "nuxt build" でjs,cssファイルを毎回ミニファイしてても仕方ないので、基本は"nuxt"で開発環境確認をしていたわけなのですが、、、ある日、お客様QAを大量に増やしたことがきっかけでビルド時間が激遅くなり、ビルド待ち、作業は止まり、メンバーは沈黙、過ぎる何も生まない時間、やがて不機嫌、なんとかならない？、イライラ、不平、不満、そして最終戦争勃発と。。。

な、なんとかせねばッ！！

と、言う事でその問題を解決するWebpackプラグインを見つけたので紹介します。

参考にさせて頂いたサイトは以下になりNuxt.js用に書き起こした感じです。
webpackのビルドを10倍高速化するプラグインの紹介
[Nuxt.js] hard-source-webpack-plugin導入時のエラー対処法

結果から言うと npm run dev(HOST=0.0.0.0 nuxt) をした時にビルド時間が桁違いに高速化しました。
hard-source 導入前

npm run dev
  nuxt:build App root: /home/dev/webapp +0ms
  nuxt:build Generating /home/dev/webapp/.nuxt files... +2ms
  ・
  ・
DONE  Compiled successfully in 231561ms

hard-source 導入後

npm run dev
  nuxt:build App root: /home/dev/webapp +0ms
  nuxt:build Generating /home/dev/webapp/.nuxt files... +2ms
   ・
   ・
DONE  Compiled successfully in -9199ms

マイナス -9199ms って…ｗ 爆速過ぎるやろ！まぁ導入前の231561msもヤバイですが。

HardSourceWebpackPlugin

HardSourcePlugin は追加すると node_modules/.cache/hard-source/ と言うフォルダを作り、そこに中間キャッシュを作ることで次回以降はそちらを見にいく様になります。それでビルド時間短縮を実現している形です。

導入手順(Nuxt v1.4.1ベース)

• HardSourcePluginをインストール

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

• nuxt.config.js の buildに追記

// nuxt.config.js
module.exports = {
  router: // ...
  head: // ...
  env: // ...
  build: {
    extend(config, ctx) {
      const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
      config.plugins.push(new HardSourceWebpackPlugin())
    },
  }
}

これだけ

実行してみる

npm run dev や npm run build を普段通り実行すればOKです。
1回目の実行ではキャッシュを作るために普段と同じくらい時間がかかりますのでご注意を。
その際にnode_modules/.cache/hard-source/にハッシュ化されたキャッシュフォルダを生成します。
npm run dev 中に以下の様な文字がでてくればキャッシュ化されています。

[hardsource:12b44871] Using 19 MB of disk space.
[hardsource:12b44871] Tracking node dependencies with: package-lock.json, yarn.lock.
[hardsource:12b44871] Reading from cache 12b44871...

2回目の実行からは劇的に速くなるはずです。

ビルド時間が長くなって困っている方はぜひぜひお試しあれ。

キャッシュでエラーになった場合にキャッシュを消す方法

たまにキャッシュが上手く参照されずエラーが起こってしまう事があります。そういうときは一度キャッシュを削除して下さい。

rm -rf node_modules/.cache/hard-source/