angular / angular/angular-cli

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

Aberta
#30,675 4 comentários 10 reações 0 responsáveis Ver no GitHub
angular/build:application devkit/build-angular:i18n freq1: low severity2: inconvenient type: bug/fix
Linguagem predominante
TypeScript
Estrelas
27k
Forks
11.8k
Merge médio
14h 23min
PRs com merge (30d)
162

Descrição

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

Guia de contribuição

Abrir o guia de contribuição

Direção de pesquisa

Comece com a reprodução mínima vinculada, usando angular.json, src/locale/messages.fr.xlf e o ponto de entrada ng build --localize. Compare os bundles gerados e seus comentários i18n antes e depois de alterar a tradução e, em seguida, rastreie o caminho de build da localização. O trabalho estará concluído quando o conteúdo dos chunks inalterados mantiver nomes de arquivo estáveis entre os builds e a saída localizada continuar correta.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
angular, typescript
Domínio
build-system, localization, performance
Tipo de issue
Bug
Dificuldade
4/5
Tempo estimado
3-5 dias
Status de atividade
Pouca atividade
Clareza
Razoavelmente clara
Facilidade para iniciantes
48/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.