Repository: angular
Issue: i18n tagged elements with lots of child elements massively increase compiled file sizes
Labels: area: i18n,P3

# 🐞 bug report

### Affected Package
The issue is caused by package @angular/compiler? 


### Is this a regression?
Not sure, only noticed it on latest

### Description
If an element is tagged with `i18n`, adding further elements inside it will dramatically increase the size of the compiled component. This seems to have a polynomial effect vs the expected linear increase of adding elements to untagged components.

## 🔬 Minimal Reproduction
https://github.com/henry-alakazhang/angular-large-i18n-repro

In this repo, the two components `LazyComponent` and `SmallerComponent` are basically identical - 50 `<div>` inside another element. `lazy` has an `i18n` tag on the outer div, `smaller` has 50 `i18n` tags on the inner divs

After compilation:

```
Initial Chunk Files                            | Names                  |      Size
main.517b66fda9398afe0f03.js                   | main                   | 218.63 kB
polyfills.990a72e8631c4173d4d7.js              | polyfills              |  36.04 kB
runtime.cda1d6b363306b7b2332.js                | runtime                |   2.35 kB
styles.b9d695c2ef77dfe48e79.css                | styles                 |   0 bytes

                                               | Initial Total          | 257.02 kB

Lazy Chunk Files                               | Names                  |      Size
lazy-lazy-module.3bf7c504ce8655f8c5ff.js       | lazy-lazy-module       |  87.53 kB
smaller-smaller-module.ef69ff53a5453ee39ea4.js | smaller-smaller-module |   4.28 kB
```

lazy is 20x larger despite being the same amount of code.

If i double the number of divs, the non-i18n module doubles in size, while the i18n one grows 4x in size.

The contents of `lazy*.js` look like this:
```js
                  return (
                    (T = $localize`${"[\ufffd#2\ufffd|\ufffd#3\ufffd|\ufffd#4\ufffd|\ufffd#5\ufffd|\ufffd#6\ufffd|\ufffd#7\ufffd|\ufffd#8\ufffd|\ufffd#9\ufffd|\ufffd#10\ufffd|\ufffd#11\ufffd|\ufffd#12\ufffd|\ufffd#13\ufffd|\ufffd#14\ufffd|\ufffd#15\ufffd|\ufffd#16\ufffd|\ufffd#17\ufffd|\ufffd#18\ufffd|\ufffd#19\ufffd|\ufffd#20\ufffd|\ufffd#21\ufffd|\ufffd#22\ufffd|\ufffd#23\ufffd|\ufffd#24\ufffd|\ufffd#25\ufffd|\ufffd#26\ufffd|\ufffd#27\ufffd|\ufffd#28\ufffd|\ufffd#29\ufffd|\ufffd#30\ufffd|\ufffd#31\ufffd|\ufffd#32\ufffd|\ufffd#33\ufffd|\ufffd#34\ufffd|\ufffd#35\ufffd|\ufffd#36\ufffd|\ufffd#37\ufffd|\ufffd#38\ufffd|\ufffd#39\ufffd|\ufffd#40\ufffd|\ufffd#41\ufffd|\ufffd#42\ufffd|\ufffd#43\ufffd|\ufffd#44\ufffd|\ufffd#45\ufffd|\ufffd#46\ufffd|\ufffd#47\ufffd|\ufffd#48\ufffd|\ufffd#49\ufffd|\ufffd#50\ufffd|\ufffd#51\ufffd|\ufffd#52\ufffd]"}:START_TAG_DIV:This is some text${"[\ufffd/#2\ufffd|\ufffd/#3\ufffd|\ufffd/#4\ufffd|\ufffd/#5\ufffd|\ufffd/#6\ufffd|\ufffd/#7\ufffd|\ufffd/#8\ufffd|\ufffd/#9\ufffd|\ufffd/#10\ufffd|\ufffd/#11\ufffd|\ufffd/#12\ufffd|\ufffd/#13\ufffd|\ufffd/#14\ufffd|\ufffd/#15\ufffd|\ufffd/#16\ufffd|\ufffd/...
```

The contents of `smaller*.js` look like this:
```js
                    return (
                      (i = $localize`This is some text`),
                      (e = $localize`This is some text`),
                      (s = $localize`This is some text`),
                      (b = $localize`This is some text`),
                      (t = $localize`This is some text`),
                      (o = $localize`This is some text`),
```


## 🌍  Your Environment

**Angular Version:**
<pre><code>
$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.2.5
Node: 12.13.1
OS: linux x64

Angular: 11.2.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.5
@angular-devkit/build-angular   0.1102.5
@angular-devkit/core            11.2.5
@angular-devkit/schematics      11.2.5
@angular/cli                    11.2.5
@schematics/angular             11.2.5
@schematics/update              0.1102.5
rxjs                            6.6.6
typescript                      4.1.5
</code></pre>

**Anything else relevant?**
This is admittedly a rare situation and has an easy workaround (tag smaller blocks of text). I encountered this when putting an `i18n` on a T&Cs text, which had a lot of smaller markup elements for bolding and margin spacing. We were planning to strip the translation out of the extracted translations file anyway and so thought it was easier to just tag the top-level once (to satisfy our lint rule) rather than tag each line individually.