Nuxt 2 静的生成機能の改善
はじめに
Nuxtバージョン2.13では、フルスタティックモードが導入されました。さらに、レンダリングとビルドプロセスを分離することを目的として、webpackビルドをトリガーせずにページをプリレンダリングする新しいコマンドnuxt exportが追加されました。唯一の問題は、ほとんどのNuxtユーザーがこの分離の潜在能力を最大限に活用できなかったことでした... **今までは。**
より高速な静的デプロイ
v2.14では、nuxt generateは**コードが変更されていない場合、webpackビルドステップを自動的にスキップ**し、キャッシュを使用して以前のビルドを使用します。これは、生成プロセスで最も時間のかかる部分である不要なビルドを回避することで、静的デプロイ時間を大幅に短縮するのに役立ちます。キャッシュのサポートは**プラットフォームに依存しない**ため、Netlify、Vercel、またはnode_modulesをキャッシュしているその他のCI/CD設定で機能します。
生成時間: キャッシュ vs フルwebpackビルド
2つのnuxt generate の比較を秒単位でご覧ください
Buildはwebpackビルドが必要な場合ですCacheはコンテンツが変更された場合のみです（webpackビルドはスキップされます）
プロジェクトリンク: 基本, Strapiモジュールドキュメント, コンテンツモジュールドキュメント and Nuxt 2ドキュメント.
プロジェクトでの使用
nuxtを最新のマイナーバージョンであるv2.14にアップデートしてください。
npm update
nuxt.config内でtargetがstaticであることを確認してください
export default {
target: 'static'
// ...
}
破壊的変更を避け、target: 'server' を維持するか、targetを指定しない場合のレガシーとの互換性を提供するために、nuxt generate は以前と同じように動作します。
- これで完了です 🙌
これで、nuxt generate コマンドは、プロジェクト内のファイルが変更された場合など、必要な場合にのみプロジェクトをビルドします。nuxt export がすでに実行しているように、常にルートを静的HTMLファイルに再レンダリングします。
使用しているプラットフォームで、ビルドコマンドを nuxt build && nuxt export から nuxt generate に戻すだけで済みます。CIを使用している場合は、node_modules を適切にキャッシュしていることを確認してください。
キャッシュからファイルを exclude する
デフォルトでは、nuxt はこれらのディレクトリを無視するため、これらのディレクトリ内で変更が発生しても、ビルドはトリガーされません
- ビルドディレクトリ（
.nuxt/） - 静的ディレクトリ（
static/） - 生成ディレクトリ（
dist/） node_modulesREADME.md- 隠しドットファイル（
.npmrcなど）
nuxt.config の generate.cache.ignore オプションを使用して、さらにパターンを追加できます
export default {
generate: {
cache: {
ignore: [
// When something changed in the docs folder, do not re-build via webpack
'docs'
]
}
}
}
デフォルトの無視エントリをオーバーライドするために、ignore オプションに関数を 使用することもできます。
モジュール作者向け
リビルドをトリガーすべきでないファイルで動作するnuxtモジュールを開発している場合はどうでしょうか？ 最良の例は、リポジトリからmarkdownファイルを読み取る @nuxt/content モジュールです。この場合、これらのファイルはランタイムモジュール内で使用されます。@nuxt/content を使用する場合、モジュール自体がnuxtにこれらのファイルを無視するように指示できるため、何もする必要はありません！ モジュール作成者は、新しい generate:cache:ignore フックを使用してこれを行うことができます
nuxt.hook('generate:cache:ignore', ignore => ignore.push('content'))
仕組み
static ターゲットで新しい nuxt generate を使用すると、無視されていないプロジェクトファイルのチェックサムとnuxtバージョンおよびその他の構成を含むスナップショットが .nuxt/build.json に書き込まれます。さらに、ビルドディレクトリを node_modules/.cache/nuxt に移動します。node_modules はすべての主要なプラットフォーム（Netlify、Vercelなど）と一般的なCI/CDスクリプトによってキャッシュされるため、このソリューションは追加の構成なしですぐに使用できます。
nuxt generate が続いて呼び出されると、プロジェクトファイルに基づいてチェックサムが再度作成され、node_modules/.cache/nuxt/build.json 内の既存のチェックサムと比較されます。
一致する場合、リビルドが必要な変更がないことを意味するため、ページのレンダリングを直接開始できます。
不一致が検出された場合、フルリビルドが必要であることを意味します。コンソールログを確認することで、リビルドの原因となったファイルを確認することもできます。ビルド後、`nuxt generate` は新しいチェックサムを `.nuxt/build.json` に保存します。完全な実装はこちらで確認できます。
従来のコマンドに戻る
Nuxt v2.13では、静的ターゲット専用に設計された nuxt export と nuxt serve を導入しました。Nuxt v2.14では、nuxt generate と nuxt start がターゲットを検知して必要なときにビルドするようになったため、これらは非推奨となりました。
サーバ targets
nuxt dev= 開発サーバーnuxt build= 本番環境用アプリケーションのビルドnuxt start= 本番サーバーの起動（Heroku、Digital OceanなどのNode.jsホスティングに使用）
静的ターゲット
nuxt dev= 開発サーバーnuxt generate= 必要に応じてビルドし、dist/に静的にエクスポートするnuxt start= 静的ホスティング（Netlify、Vercel、Surgeなど）のようにdist/ディレクトリを提供する、デプロイ前のテストに最適
次のステップ
- プロジェクトを nuxt@2.14.0 にアップグレードしてください
nuxt exportの代わりにnuxt generateを使用してくださいnuxt serveの代わりにnuxt startを使用してください- 高速デプロイをお楽しみください 🤙