i18n causes esbuild chunks to be cache-busted on each deploy
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 48/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- angular, typescript
調査の方向性
リンクされた最小再現から始め、angular.json、src/locale/messages.fr.xlf、ng build --localize のエントリポイントを使用します。翻訳を変更する前後で生成されたバンドルとその i18n コメントを比較し、その後、ローカライゼーションのビルドパスを追跡します。変更されていないチャンクの内容がビルド間で安定したファイル名を維持し、ローカライズされた出力が正しいままであれば完了です。
索引モデルが issue の本文から書いたものです。
説明
Command
build
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
Webpack builder
Description
Turning on esbuild is causing us to experience a large increase in the number of static requests served to our users (+9B requests/mo / +60% increase), leading to a substantial impact on our CDN bill.
Each spike in the graph above aligns with a deploy (no deploys on weekends), indicating that all assets appear to be cache-busted with each new build (whereas in practice only a fraction of the code is updated between versions).
Upon investigating where this could come from, I noticed that chunks with identical content between two build versions have different filename hashes, i.e., chunk-ASRRVFTX.js in the first one and chunk-MO3N5ZQM.js in the second one:
If you look carefully, you can notice that the chunk contents are not exactly identical—they differ by the value of the i18n: comment. Looking into it, that i18n hash is the same for all the chunks (in any locale) across a build and appears to be a SHA256 of all the localized dictionaries.
Since at least a couple of strings are going to change across builds (we have ~14k strings in the app), this effectively means that the entire app is cache-busted on each deploy, leading to increased infrastructure costs and degraded client-side performance.
Minimal Reproduction
Minimal repro is available here: https://github.com/laurentgoudet/angular-i18n-esbuild-bug
Steps I performed:
ng newng add @angular/localize- Configured an
frlocale inangular.json - Added some string in
app.ts - Ran
ng extract-i18nto extract the dictionary - Copied
messages.xlftosrc/locale/messages.fr.xlf - Ran
ng build --localizeto run the localized build
ng build --localize
Initial chunk files | Names | Raw size | Estimated transfer size
main-BGVPYDPI.js | main | 221.57 kB | 61.67 kB
polyfills-25EJAOGH.js | polyfills | 36.97 kB | 12.41 kB
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 258.54 kB | 74.08 kB
Application bundle generation complete. [1.794 seconds]
- Observed that
i18n:hash is the same betweenpolyfills-<foo>.js&main-<foo>.jsbundles in bothen-US&fr
$ rg -l i18n:cf2ec5733a24b255a5f4c5407a5cd5747f51614f533bf44f15ae320960b64048 dist
dist/test-esbuild-i18n/browser/en-US/polyfills-PJEY6MCR.js
dist/test-esbuild-i18n/browser/fr/polyfills-PJEY6MCR.js
dist/test-esbuild-i18n/browser/en-US/main-YXPGXXTL.js
dist/test-esbuild-i18n/browser/fr/main-YXPGXXTL.js
-
Add a translation for in the
frdictionary (src/locale/messages.fr.xlf) -
Run
ng build --localizeagain -
Observe that the filename hashes have changed
ng build --localize
Initial chunk files | Names | Raw size | Estimated transfer size
main-YXPGXXTL.js | main | 221.57 kB | 61.67 kB
polyfills-PJEY6MCR.js | polyfills | 36.97 kB | 12.45 kB
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 258.54 kB | 74.13 kB
Application bundle generation complete. [1.426 seconds]
Exception or Error
Your Environment
ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 20.0.5
Node: 22.15.0
Package Manager: npm 10.9.2
OS: darwin arm64
Angular: 20.0.6
... common, compiler, compiler-cli, core, forms, localize
... platform-browser, router
Package Version
------------------------------------------------------
@angular-devkit/architect 0.2000.5
@angular-devkit/core 20.0.5
@angular-devkit/schematics 20.0.5
@angular/build 20.0.5
@angular/cli 20.0.5
@schematics/angular 20.0.5
rxjs 7.8.2
typescript 5.8.3
zone.js 0.15.1
Anything else relevant?
No response
- 主要言語
- TypeScript
- スター
- 27k
- フォーク
- 11.8k
- 平均マージ
- 16時間 35分
- マージ済み PR(30日)
- 176
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
angular/angular-cli のほかの issue
-
area: @angular/build gemini-triaged
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/angular-cli#33055 · コメント 1 件 · リアクション 3 件 ·
-
area: @angular/build gemini-triaged
難易度 4/5 3〜5日 初心者へのやさしさ 72/100
angular/angular-cli#34137 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 担当者 1 名 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 担当者 1 名 ·
angular/angular-cli の issue をすべて見る
似ている issue
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
dennys-bd/agent-hive#184 ·
-
Add: hunch オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
AbdelStark/awesome-typesafe#104 ·
-
ai-observability bug team/ai-observability
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
vicharanashala/fln#563 ·