Nuxt.js のビルド時間を高速化
Nuxt.jsで開発していると、ローカル開発環境で確認の為に、ビルドを走らせるかと思います。
しかし、Nuxt.js のビルドは割と時間かかりますよね。 HardSourceWebpackPluginを利用することで Nuxt.js のビルド時間を大幅に削減することができます。
今回は HardSourceWebpackPlugin の導入方法について紹介します。
目次
HardSourceWebpackPlugin を有効にする
Nuxt.js 2.4以降からNuxt.jsに組み込まれているので、バージョン2.4以降を使っているのであれば、nuxt.config.jsに設定を加えるだけで使えるようになります。
API: build プロパティ - Nuxt.js
HardSourceWebpackPlugin
注意として Nuxt.js のドキュメントにも書いてありますが、2019年8月21日時点では、実験的な機能となっています。
nuxt.config.jsの設定
設定方法は非常に簡単です。
Nuxt.js では buildプロパティに設定書くことで、Webpack 設定をカスタマイズすることが出きます。
nuxt.config.js のbuildプロパティにhardSource: trueを追加すれば設定できます。
nuxt.config.js
build: {
// ~ 省略 ~
hardSource: true,
// ~ 省略 ~
}キャッシュのクリア
HardSourceWebpackPluginを使うことでビルド時間が大幅に改善されるのですが、
環境変数などもキャッシュされてしまい、反映されないという事象が起きたりするようです。
そのため、反映されなかったり、キャッシュ周りで怪しいエラーが起きたらキャッシュクリアが必要になります。
キャッシュは node_modules/.cache/hard-source/ に作られるので、下記コマンドで消すことができます。
rm -rf node_modules/.cache/hard-source/
よく使うのでpackage.jsonにコマンドを書いておいても良いかもしれません。
私の場合は下記のように、package.jsonのスクリプトに登録しています。
package.json
// ~ 省略 ~
"scripts": {
"clear-hard-source-cache": "rm -rf node_modules/.cache/hard-source/"
// ~ 省略 ~
}キャッシュクリアの実行方法
// yarnの場合
$ yarn clear-hard-source-cache
// npmの場合
$ npm run clear-hard-source-cacheパフォーマンス
どのくらい早くなったか、自分のPCでの計測結果を記載します。
ビルドはこのブログ自体のビルドです。
実行コマンドは yarn build です。
1回目: 65秒
2回目: 26秒
3回目: 25秒
１回目はキャッシュがないので遅いですが、２回目以降は半分以下の時間でビルドができるようになりました。
今回yarn buildでやりましたが、yarn run dev、yarn generateなどでも同様に早くなります。
まとめ
今回の内容をざっくりまとめます。
- HardSourceWebpackPluginを有効にすることでビルドを高速化
- Nuxt.js バージョン2.4以降ではNuxt.jsに組み込まれているので、設定に１行追加するだけで導入可能
- 注意点として、2019年8月21日時点ではまだ、実験的な機能として組み込まれている
- ビルド時間が半分以上短縮
開発時にビルド直すときに時間がかかってしまい、ストレスを感じていたのですが、これはかなり改善されそうです。