0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

バンドルサイズ削減に特化した @nuxt/i18n の代替案「Intlayer」

Last updated at Posted at 2025-12-19

これまで数多くのプロジェクトに 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 キーを使用、ローカル実行、データ収集なし)

数千のコンポーネントを一瞬で変換するエクストラクターとコンパイラを内蔵

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?