angular / angular/angular-cli

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

Open
#30,675 4 comments 10 reactions 0 assignees View on GitHub
angular/build:application devkit/build-angular:i18n freq1: low severity2: inconvenient type: bug/fix
Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
14h 23m
Merged PRs (30d)
162

Description

### 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_

Contributor guide

Open the contributing guide

Research direction

Start with the linked minimal reproduction, using angular.json, src/locale/messages.fr.xlf, and the ng build --localize entry point. Compare generated bundles and their i18n comments before and after changing the translation, then trace the localization build path. Done means unchanged chunk content keeps stable filenames across builds while localized output remains correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
build-system, localization, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.