mintsu's blog

Nuxt.js のビルド時間を高速化

2019-08-22 10:00:00
フロントエンド

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秒

1回目はキャッシュがないので遅いですが、2回目以降は半分以下の時間でビルドができるようになりました。
今回yarn buildでやりましたが、yarn run devyarn generateなどでも同様に早くなります。

まとめ

今回の内容をざっくりまとめます。

  • HardSourceWebpackPluginを有効にすることでビルドを高速化
  • Nuxt.js バージョン2.4以降ではNuxt.jsに組み込まれているので、設定に1行追加するだけで導入可能
  • 注意点として、2019年8月21日時点ではまだ、実験的な機能として組み込まれている
  • ビルド時間が半分以上短縮

開発時にビルド直すときに時間がかかってしまい、ストレスを感じていたのですが、これはかなり改善されそうです。