[Nuxt.js] nuxt generateのパフォーマンスを改善させる方法

背景

Netlify でのデプロイ時にnuxt generateでのビルド時間が 10 分かかっていた。（route 数は 475）

nuxt generateのパフォーマンスを改善させたい。

nuxt-generate-cluster

nuxt-generate-clusterを使うことでビルドの並列処理を行うことができる。

セットアップ

yarn add nuxt-generate-cluster

インストールしたら、package.jsonに下記の npm script を追加・修正する。（Nuxt.js のプロジェクトだとnuxt generateになっている部分を下記に書き換える）

"generate": "nuxt-generate -w 4 -b",

実行

yarn generateを実行すると、以下のようにワーカの立ち上がりが分かる。

6:22:17 PM: ℹ worker 1 started with pid 1379
6:22:17 PM: ℹ worker 2 started with pid 1385
6:22:17 PM: ℹ worker 3 started with pid 1391
6:22:17 PM: ℹ worker 4 started with pid 1397
6:22:25 PM: ✔ generated: /category.html
6:22:26 PM: ✔ generated: /tag.html
6:22:27 PM: ✔ generated: /index.html
︙
︙

特にnuxt.config.jsの設定を変更せずともnuxt-generate-clusterを導入できた。

結果

10 分掛かっていたビルド時間が4 分まで短縮できた。

追記

ビルドオプションのparallelを有効化してみた。

  build: {
    parallel: true,
  }

この設定によるものか定かではないが、さらに 174 秒（3 分） まで短縮できた。