angular / angular/angular-cli

i18n causes esbuild chunks to be cache-busted on each deploy

オープン
#30,675 コメント 4 件 リアクション 10 件 担当者 0 名 GitHub で見る
angular/build:application devkit/build-angular:i18n freq1: low severity2: inconvenient type: bug/fix
主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
14時間 23分
マージ済み PR(30日)
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.

Image

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:

Image
Image

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 のエントリポイントを使用します。翻訳を変更する前後で生成されたバンドルとその i18n コメントを比較し、その後、ローカライゼーションのビルドパスを追跡します。変更されていないチャンクの内容がビルド間で安定したファイル名を維持し、ローカライズされた出力が正しいままであれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
build-system, localization, performance
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
48/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。