Nuxt.js (SSR)の build にかかる時間の短縮

問題

Nuxt.js で Web アプリを開発するとき、nuxt.config.js の設定でアプリを SPA にするかサーバサイドレンダリング(SSR)にするかを選べる。アプリケーションをデプロイするとき、SPA の場合には、$ nuxt build、 SSR の場合には $ nuxt generate コマンドを実行することになる。

$ nuxt generate コマンドを実行すると、pages にある各ページについて静的ページを作成するため、その分時間がかかる。Netlify を利用してアプリケーションをホスティングする場合、build のタイムアウト時間が 15 分ほど。SSR の場合には静的ページの生成に時間がかかってデプロイに失敗する事がある。

対応策: nuxt-generate-cluster

nuxt-generate-cluster は Nuxt.js を利用した静的ファイルの generate をマルチスレッドで行うためのツール。

インストール

yarn add nuxt-generate-cluster

設定

package.json で $ yarn generate の実行内容を以下のように変更。

"scripts": {
  "generate": "nuxt-generate -w 4"
}

上記で 4 つの worker が動作するようになる。他にも nuxt.config.js で詳細な設定を行えるが、最低限これだけでもマルチスレッドでの generate が可能になる。

結果

自分が扱っていたシステムでは 15 分強の時間がかかっていた全体のビルド時間が、4 つの worker で 10 分程度まで短縮された。