言語が増えるほどバンドルも大きくなる、どれくらい?
多言語対応のWebアプリケーションは、言語ごとの翻訳ファイルを管理する必要があります。問題は、この翻訳ファイルをどう読み込むかによって実際にユーザーがダウンロードするサイズが大きく変わることです。すべての言語の翻訳データを1つのJavaScriptバンドルに含めると(eager loading)、対応言語数に比例してバンドルサイズが増加し、ユーザーは実際には必要のない言語のデータまで一緒にダウンロードすることになります。
一方、言語ごとにファイルを分離してユーザーが選択した言語だけを遅延読み込み(lazy loading)すれば、初期読み込みサイズは言語数に関係なく常に1言語分に固定されます。このツールは翻訳キー数と平均文字列長を基準に1言語あたりの概算JSONサイズを推定し、キー・値構造のオーバーヘッドを加えて、eager方式とlazy方式のサイズを比較して表示します。翻訳テキストは繰り返される単語やパターンが多いためgzip圧縮率が高く、実際の転送サイズは元のサイズよりかなり小さくなります。
実務ではi18nextのネームスペース分離やルート単位のコード分割と併せて遅延読み込みを適用する方法が最も広く使われています。対応言語が3つ以下と少なければeager読み込みでも問題ありませんが、5つ以上の言語に対応する場合はバンドルサイズの差が目に見えて広がるため、遅延読み込み構造の検討をお勧めします。
よくある質問
ユーザーが選択した言語だけを遅延読み込みする方法が最も効果的で、全言語を1つのバンドルにまとめるより初期読み込みサイズを大幅に減らせます。
はい。翻訳テキストは繰り返しパターンが多いため圧縮率が高く、gzip適用時に元のサイズより大きく減少します。
全言語を1つのバンドルに含めると言語数に比例して増加しますが、言語ごとに分離して遅延読み込みすれば実際にユーザーが受け取るサイズは増えません。