i18n causes esbuild chunks to be cache-busted on each deploy
- 主要語言
- TypeScript
- 星號
- 27k
- 分支
- 11.8k
- 平均合併
- 14 小時 23 分鐘
- 30 天內合併 PR
- 162
描述
### Command
build
### Is this a regression?
- [x] 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 new`
- `ng add @angular/localize`
- Configured an `fr` locale in `angular.json`
- Added some string in `app.ts`
- Ran `ng extract-i18n` to extract the dictionary
- Copied `messages.xlf` to `src/locale/messages.fr.xlf`
- Ran `ng build --localize` to 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 between `polyfills-.js` & `main-.js` bundles in both `en-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 `fr` dictionary (`src/locale/messages.fr.xlf`)
- Run `ng build --localize` again
- 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
```text
```
### Your Environment
```text
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_
貢獻指南
研究方向
從連結的最小重現開始,使用 angular.json、src/locale/messages.fr.xlf 和 ng build --localize 進入點。在變更翻譯前後比較產生的 bundle 及其 i18n 註解,然後追蹤本地化建置路徑。當未變更的 chunk 內容在不同建置之間維持穩定的檔名,且本地化輸出仍然正確時,即表示完成。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- angular, typescript
- 領域
- build-system, localization, performance
- Issue 類型
- 缺陷
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 活躍度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100