nuxt-i18n-micro

I18n Microは、高速、シンプル、軽量な国際化（i18n）モジュールです。

logo

Nuxt I18n Micro

Nuxt I18n Micro は、Nuxt 用の高速、シンプル、軽量な国際化 (i18n) モジュールです。コンパクトなサイズにもかかわらず、大規模プロジェクトを念頭に設計されており、nuxt-i18n のような従来の i18n ソリューションと比較して大幅なパフォーマンス向上を実現します。このモジュールは、ビルド時間の最小化、サーバー負荷の削減、バンドルサイズの縮小に焦点を当て、高い効率性を実現するためにゼロから構築されました。

Nuxt I18n Microを選ぶ理由

Nuxt I18n Micro モジュールは、元の nuxt-i18n モジュールに見られた重大なパフォーマンス問題を、特にトラフィックの多い環境や大きな翻訳ファイルを持つプロジェクトで解決するために作成されました。nuxt-i18n の主な問題点には以下があります。

高いメモリ消費量: ビルド時と実行時の両方で大量のメモリを消費し、パフォーマンスのボトルネックにつながります。
パフォーマンスの低下: 特に大きな翻訳ファイルの場合、ビルド時間とサーバー応答に顕著な遅延を引き起こします。
大きなバンドルサイズ: 大きなバンドルを生成し、アプリケーションのパフォーマンスに悪影響を与えます。
メモリリークとバグ: 高負荷時にメモリリークや予測不能な動作があることが知られています。

パフォーマンス比較

Nuxt I18n Micro の効率性を示すため、同一条件下でテストを実施しました。両モジュールは、同じハードウェアで10MBの翻訳ファイルを使用してテストされました。

ビルド時間とリソース消費

比較のための修正値

Nuxt I18n v9:

合計サイズ（ビルド）: 13.7 MB (2.2 MB gzip)
最大CPU使用率: 248.50%
最大メモリ使用量: 3057.23 MB
経過時間: 0時間0分12秒

Nuxt I18n Micro:

合計サイズ（ビルド）: 229 KB (152 KB gzip) — 13.47 MB または 98.36% 小さい (2.05 MB または 93.10% 小さい gzip)
最大CPU使用率: 195.00% — 21.53% 低い
最大メモリ使用量: 1140.63 MB — -1916.6 MB 少ないメモリ
経過時間: 0時間0分7秒 — -5秒速い

サーバーパフォーマンス（1万リクエスト）

Nuxt I18n v9:

1秒あたりのリクエスト数: 34 #/秒 (平均)
1リクエストあたりの時間: 1487.60 ミリ秒 (平均)
最大メモリ使用量: 9958.67 MB

Nuxt I18n Micro:

1秒あたりのリクエスト数: 339 #/秒 (平均) — 1秒あたり305件多いリクエスト (897.06%増加)
1リクエストあたりの時間: 5.10 ミリ秒 (平均) — -1482.50 ミリ秒速い (99.66%削減)
最大メモリ使用量: 405.20 MB — -9553.47 MB 少ないメモリ使用量 (95.93%削減)

これらの結果は、Nuxt I18n Micro があらゆる重要な分野で元のモジュールを大幅に上回ることを明確に示しています。

主な機能

🌐 コンパクトでありながらパワフル: 小さいサイズにもかかわらず、Nuxt I18n Micro は大規模プロジェクト向けに設計されており、パフォーマンスと効率性に重点を置いています。
⚡ 最適化されたビルドとランタイム: ビルド時間、メモリ使用量、サーバー負荷を削減し、高トラフィックアプリケーションに最適です。
🛠 ミニマリストデザイン: このモジュールはわずか5つのコンポーネント（1つのモジュールと4つのプラグイン）で構成されており、理解、拡張、保守が容易です。
📏 効率的なルーティング: 各ロケールごとに個別のルートを生成する他のi18nモジュールとは異なり、動的な正規表現ベースのルーティングにより、ロケールの数に関わらず2つのルートのみを生成します。
🗂 合理化された翻訳読み込み: JSONファイルのみがサポートされており、翻訳は共通テキスト（例: メニュー）用のグローバルファイルと、ページ固有のファイルに分割されています。後者は、dev モードで存在しない場合に自動生成されます。

クイックセットアップ

Nuxtアプリケーションにモジュールをインストールするには

npm install nuxt-i18n-micro

次に、nuxt.config.ts に追加します。

export default defineNuxtConfig({
  modules: [
    'nuxt-i18n-micro',
  ],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', dir: 'ltr' },
      { code: 'fr', iso: 'fr-FR', dir: 'ltr' },
      { code: 'ar', iso: 'ar-SA', dir: 'rtl' },
    ],
    defaultLocale: 'en',
    translationDir: 'locales',
    meta: true,
  },
})

これで完了です！NuxtアプリでNuxt I18n Microを使用する準備が整いました。