Search code examples
javascriptangulartypescriptpolyfills

Why is my Angular app's polyfills.js 36kb when my browserslist is just `last 1 Chrome version`?

Here are the steps I took to create an example Angular app:

  1. npm i -g @angular/cli (Installed Angular 11.2)
  2. ng new foo
  3. Opt in for SASS, Angular Router, and analytics
  4. cd foo
  5. Replace the contents of .browserslistrc with last 1 Chrome version. (Running npx browserslist then prints only chrome 89, as expected.)
  6. ng build --prod

Here is the result:

$ 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

I'm surprised that it compiles 36kb of polyfills when all I'm supporting is the latest version of Chrome. To my way of thinking, this should require few if any polyfills.

What do these 36kb do? It's hard for me to tell because the file is minified.

Solution

  • Even if you remove .browserlistrc or comment out everything, you will get: 35.98 kB.

    With just that one line, browserlist falls back to the value of defaults, which includes: > 0.5%, last 2 versions, Firefox ESR, not dead

    Note that these default values are mainly relevant due to Zone.js support, as you can see for yourself. Try ng build without the --prod flag and you get a nicely commented polyfills file: (Showing first few lines only, for .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
 */

    Learn more in https://angular.io/guide/browser-support