背景

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を実行すると、以下のようにworkerの立ち上がりが分かる。

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分) まで短縮できた。