これまで数多くのプロジェクトに nuxt/i18n を導入してきましたが、一つの明確な結論に達しました。それは、JSフレームワークに統合された i18n ソリューションとしては、nuxt/i18n が現状もっとも優れている ということです。
手軽なセットアップ(Plug & Play)、名前空間のロード機能、そして組み込みのルーティング機能は、開発していて本当に快適です。
しかし、このソリューションには大きな課題があります。それは、ロードされた名前空間が Tree-shaking(不要コードの除去)されない という点です。
ロケールごとに JSON ファイルを動的ロードできるとはいえ、結局 Nuxt はすべての JSON ファイルをマージしてしまいます。つまり、locale/zh/about.json のようなファイルが、本来必要のないページも含めてすべてのページでロードされてしまうのです。
問題のイメージ:
10ページ構成で、それぞれの内容が 100% 異なるアプリを想像してください。平均すると、ユーザーの画面に描画されないにもかかわらず、JSON コンテンツの 90% がすべてのページでロードされてしまうことになります。
これを回避するために、各コンポーネント内で必要な JSON ファイルだけを動的ロードする方法もあります。しかし、これではボイラープレート(定型コード)が増え、構文も複雑になり、開発スピードに大きな影響を与えてしまいます。
そこで私は考えました。「コンポーネントが本当に必要とするコンテンツだけをロードするにはどうすればいいか?」「巨大な JSON ペイロードによるハイドレーションの負荷をどう避けるか?」
私の解決策は、ロケールベースの動的ロードと、**未使用の JSON コンテンツをパージ(削除)する変換ステップ(post-transformation)**を組み合わせることでした。
ドキュメントはこちらです。ぜひフィードバックをいただけると嬉しいです:
-> https://intlayer.org/ja/doc/environment/nuxt-and-vue
主な特徴:
nuxt/i18n の基盤を活用し、同等の簡単な導入を実現
完全な型安全性(Typesafe)
コンポーネントごとのコンテンツ分割をクリーンに実現(1 .vue ファイルにつき 1 .content.ts、コードベースのどこにでも配置可能)
従来の vue-i18n 構文や /locale 内の集中管理型 JSON ファイルもそのまま利用可能
既存の Vue / Nuxt アプリに導入して JSON 管理を支援可能
翻訳の欠落を検知する CLI / CI ツール
VS Code 拡張機能あり
コンテキストを理解する AI 翻訳機能(自身の API キーを使用、ローカル実行、データ収集なし)
数千のコンポーネントを一瞬で変換するエクストラクターとコンパイラを内蔵