javascript - Zašto je moj Angular aplikacijski polyfills.js 36kb kada je moj browserslist samo `last 1 Chrome version`?

Evo koraka koje sam poduzeo da bih stvorio primjer Angular aplikacije:

  1. npm i -g @angular/cli (Instaliran Angular 11.2)
  2. ng new foo
  3. Prijavite se za SASS, Angular Router i analitiku
  4. cd foo
  5. Zamijenite sadržaj .browserslistrc s last 1 Chrome version. (Pokretanje npx browserslist zatim ispisuje samo chrome 89, kao što se očekuje.)
  6. ng build --prod

Evo rezultata:

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

Iznenađen sam što kompajlira 36 kb polyfilla kada podržavam samo najnoviju verziju Chromea. Po mom mišljenju, to bi trebalo zahtijevati malo ili uopće nijedan polyfill.

Što rade ovih 36 kb? Teško mi je reći jer je datoteka minificirana.

Odgovor #1

Čak i ako uklonite .browserlistrc ili komentirate sve, dobit ćete: 35.98 kB.

Samo s tim jednim redom, browserlist se vraća na vrijednost defaults, koja uključuje: > 0,5%, posljednje 2 verzije, Firefox ESR, not dead

Imajte na umu da su ove zadane vrijednosti uglavnom relevantne zbog podrške za Zone.js, kao što možete i sami vidjeti. Pokušajte ng build bez zastavice --prod i dobit ćete lijepo komentiranu datoteku s polifilovima: (Prikazane su samo prve nekoliko linija, za .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
 */

Saznajte više na https://angular.io/guide/browser-support

Povezani članci