最適化

パフォーマンス

「異なる配布ファイル」セクションで説明されているように、Vue I18n はバンドラ用に以下の 2 つのビルド済み ES モジュールを提供しています。

メッセージコンパイラ + ランタイム: vue-i18n.esm-bundler.js
ランタイムのみ: vue-i18n.runtime.esm-bundler.js

バンドラの場合、デフォルトで vue-i18n.esm-bundler.js を @intlify/unplugin-vue-i18n とバンドルするように設定されています。バンドルサイズをさらに削減したい場合は、ランタイムのみの vue-i18n.runtime.esm-bundler.js を使用するようにバンドラを設定できます。

ES モジュール vue-i18n.runtime.esm-bundler.js を使用することは、すべてのロケールメッセージをメッセージ関数または AST リソースにプリコンパイルする必要がある ことを意味します。つまり、vue-i18n はメッセージ関数のみを実行するため、コンパイルが不要になり、パフォーマンスが向上します。

NOTE

v9.3 以前では、ロケールメッセージはメッセージ関数にコンパイルされますが、v9.3 以降では、@intlify/bundle-tools を使用して AST にコンパイルされます。

NOTE

v9.3 以前では、すべてのロケールメッセージは @intlify/unplugin-vue-i18n でコンパイルされるため、メッセージコンパイラはバンドルされず、バンドルサイズを削減できます。

v9.3 以降では、メッセージコンパイラもバンドルされるため、バンドルサイズを削減できません。これはトレードオフです。理由については、JIT コンパイルの詳細を参照してください。

NOTE

v9.3 以前で CSP が有効になっている場合、eval ステートメントが使用されているため、vue-i18n.esm-bundler.js はコンパイラで動作しません。これらのステートメントは default-src 'self' ヘッダーに違反します。代わりに vue-i18n.runtime.esm-bundler.js を使用する必要があります。

NOTICE

v9.3 以降、CSP の問題は vue-i18n メッセージコンパイラの JIT コンパイルによって回避できます。JIT コンパイルの詳細を参照してください。

設定方法

一部のバンドラのモジュール解決エイリアス機能（例：resolve.alias vite および webpack）を使用して、これらのモジュールパスでモジュールを設定できますが、時間と労力がかかります。簡単にするために、Intlify プロジェクトは一部のバンドラ用のプラグイン/ローダーを提供しています。

unplugin-vue-i18n

unplugin は、vite、webpack、rollup、esbuild などのバンドルツールのための統一プラグインシステムです。

Intlify プロジェクトは、vite および webpack 用に unplugin-vue-i18n を提供しています。

プロダクションビルドを行う場合、Vue I18n は自動的にランタイムのみのモジュールをバンドルします。

プラグインのインストール

npmyarnpnpm

npm install @intlify/unplugin-vue-i18n -D

yarn add @intlify/unplugin-vue-i18n -D

pnpm add -D @intlify/unplugin-vue-i18n

vite 用プラグインの設定

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // locale messages resource pre-compile option
      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
    }),
  ],
})

webpack 用プラグインの設定

// webpack.config.js
const path = require('path')
const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack')

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // locale messages resource pre-compile option
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}

重要なオプション

`include`

include オプションは、ビルド時に事前コンパイルするロケールメッセージリソースのファイルパスを指定します。すべてのロケールメッセージファイルをカバーするようにこのオプションを設定する必要があります。事前コンパイルされていないメッセージは、プロダクションビルドで正しく動作しません（例: {name} のような補間プレースホルダーが置換されません）。

VueI18nPlugin({
  include: resolve(dirname(fileURLToPath(import.meta.url)), './src/locales/**'),
})

`runtimeOnly`

デフォルトでは、@intlify/unplugin-vue-i18n はプロダクション用にランタイムのみのビルドを使用し、バンドルサイズを小さくするためにメッセージコンパイラを除外します。これは、すべてのロケールメッセージがビルド時に事前コンパイルされる必要があることを意味します。

ロケールメッセージを実行時に動的にロードする場合（例: API やデータベースから）、ランタイムメッセージコンパイラを含めるために runtimeOnly: false を設定する必要があります：

VueI18nPlugin({
  runtimeOnly: false,  // ランタイムメッセージコンパイラを含める
  include: resolve(dirname(fileURLToPath(import.meta.url)), './src/locales/**'),
})

トラブルシューティング

開発環境では翻訳が動作するのに、プロダクションで補間プレースホルダーが置換されない場合（例: 値の代わりに {name} がそのまま表示される）、以下のいずれかが原因の可能性があります：

include オプションがすべてのロケールメッセージファイルをカバーしていない — include にマッチしないメッセージは事前コンパイルされません
実行時にメッセージを動的にロードしている — メッセージコンパイラを含めるために runtimeOnly: false を設定してください

その他の設定

すべてのオプション（runtimeOnly、include、exclude、ssr、module など）の詳細については、@intlify/unplugin-vue-i18n ドキュメントを参照してください。

Quasar CLI

何もする必要はありません。Quasar CLI が最適化を処理します。

機能ビルドフラグ

Tree-shaking によるバンドルサイズの削減

esm-bundler ビルドでは、コンパイル時に上書きできるグローバル機能フラグが公開されるようになりました：

__VUE_I18N_FULL_INSTALL__（有効/無効、vue-i18n API に加えて、コンポーネントとディレクティブのインストールを完全にサポート：true）
__VUE_I18N_LEGACY_API__（有効/無効、vue-i18n レガシースタイル API のサポート。レガシー API は v12 で削除されました、デフォルト：false）

ビルドはこれらのフラグを設定しなくても機能しますが、最終的なバンドルで適切な tree shaking を行うために、それらを適切に設定することを 強くお勧めします。

バンドラの設定方法については、こちらを参照してください。

JIT コンパイル

Support Version

🆕 9.3+

v9.3 以前、vue-i18n メッセージコンパイラは、AOT（Ahead Of Time）のようにロケールメッセージをプリコンパイルしていました。

しかし、以下の問題がありました：

CSP の問題：サービス/ウェブワーカー、CDN のエッジサイドランタイムなどで動作させるのが難しい。
バックエンド統合：API 経由でデータベースなどのバックエンドからメッセージを取得し、動的にローカライズするのが難しい

これらの問題を解決するために、JIT（Just In Time）スタイルのコンパイルがメッセージコンパイラとしてサポートされています。

$t または t 関数を使用してアプリケーションでローカリゼーションが実行されるたびに、メッセージリソースがメッセージコンパイラ上でコンパイルされます。

esm-bundler ビルドと vite などのバンドラで、以下の機能フラグを設定する必要があります：

__INTLIFY_JIT_COMPILATION__（有効/無効、JIT スタイルのメッセージコンパイラ、デフォルト：false）
__INTLIFY_DROP_MESSAGE_COMPILER__（有効/無効、バンドル時にメッセージコンパイラを tree-shake するかどうか、このフラグは __INTLIFY_JIT_COMPILATION__ が有効な場合に機能します。デフォルト：false）

NOTICE

この機能は、v9.3 以前のバージョンとの互換性のため、デフォルトでは無効になっています。

NOTICE

v10 以降、JIT コンパイルはデフォルトで有効になっているため、バンドラで __INTLIFY_JIT_COMPILATION__ フラグを設定する必要はなくなりました。

バンドラの設定方法については、こちらを参照してください。

バンドラの機能フラグの設定

webpack: DefinePlugin を使用
Rollup: @rollup/plugin-replace を使用
Vite: デフォルトで設定されていますが、define オプションを使用して上書きできます
Quasar CLI: デフォルトで設定されていますが、quasar.conf.js > build > rawDefine を使用して上書きできます

NOTE

置換値は ブールリテラルである必要があり、文字列にすることはできません。そうしないと、バンドラ/ミニファイアが条件を適切に評価できなくなります。

拡張機能による事前翻訳

vue-i18n-extensions パッケージを使用して、事前翻訳（サーバーサイドレンダリング）を使用できます。

使用方法については、こちらを参照してください。

SSR (サーバーサイドレンダリング)

SSR 用プラグインの設定

SSR アプリケーションの場合、@intlify/unplugin-vue-i18n で ssr オプションを設定する必要があります：

// vite.config.ts
import { defineConfig } from 'vite'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  plugins: [
    VueI18nPlugin({
      ssr: true, // SSR サポートを有効にする
    }),
  ],
})

最適化 ​

パフォーマンス ​

設定方法 ​

unplugin-vue-i18n ​

プラグインのインストール ​

vite 用プラグインの設定 ​

webpack 用プラグインの設定 ​

重要なオプション ​

include ​

runtimeOnly ​

その他の設定 ​

Quasar CLI ​

機能ビルドフラグ ​

Tree-shaking によるバンドルサイズの削減 ​

JIT コンパイル ​

バンドラの機能フラグの設定 ​

拡張機能による事前翻訳 ​

SSR (サーバーサイドレンダリング) ​

SSR 用プラグインの設定 ​

最適化

パフォーマンス

設定方法

unplugin-vue-i18n

プラグインのインストール

vite 用プラグインの設定

webpack 用プラグインの設定

重要なオプション

`include`

`runtimeOnly`

その他の設定

Quasar CLI

機能ビルドフラグ

Tree-shaking によるバンドルサイズの削減

JIT コンパイル

バンドラの機能フラグの設定

拡張機能による事前翻訳

SSR (サーバーサイドレンダリング)

SSR 用プラグインの設定