javascript - Prečo má súbor polyfills.js mojej Angular aplikácie 36 kB, keď môj browserslist je iba `last 1 Chrome version`?

Tu sú kroky, ktoré som podnikol na vytvorenie príkladnej aplikácie Angular:

  1. npm i -g @angular/cli (Nainštalovaný Angular 11.2)
  2. ng new foo
  3. Prihlásiť sa na SASS, Angular Router a analytiku
  4. cd foo
  5. Nahraďte obsah súboru .browserslistrc obsahom last 1 Chrome version. (Spustením npx browserslist sa potom vytlačí iba chrome 89, ako sa očakávalo.)
  6. ng build --prod

Tu je výsledok:

ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.feaf6a85348d901578d8.js      | main          | 211.52 kB
polyfills.00096ed7d93ed26ee6df.js | polyfills     |  35.98 kB
runtime.7b63b9fd40098a2e8207.js   | runtime       |   1.45 kB
styles.09e2c710755c8867a460.css   | styles        |   0 bytes

                                  | Initial Total | 248.95 kB

Build at: 2021-03-16T14:41:16.954Z - Hash: 57aec26226ae3eb0ee1b - Time: 12529ms

Som prekvapený, že kompiluje 36 kb polyfillov, keď podporujem len najnovšiu verziu Chrome. Podľa môjho názoru by to malo vyžadovať málo, ak vôbec nejaké, polyfillov.

Čo robí týchto 36 KB? Je pre mňa ťažké to povedať, pretože súbor je minifikovaný.

Odpoveď č. 1

Aj keď odstránite .browserlistrc alebo zakomentujete všetko, dostanete: 35,98 kB.

Len s týmto jediným riadkom browserlist sa vracia k hodnote defaults, ktorá zahŕňa: > 0,5 %, posledné 2 verzie, Firefox ESR, nie je zastaraný

Všimnite si, že tieto predvolené hodnoty sú hlavne relevantné kvôli podpore Zone.js, ako môžete sami vidieť. Skúste ng build bez prepínača --prod a dostanete pekne okomentovaný súbor polyfills: (Zobrazené len prvé riadky, pre .browserlistrc: last 1 Chrome version)

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main^M
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

Dozviete sa viac na https://angular.io/guide/browser-support

Súvisiace články