javascript - Tại sao polyfills.js của ứng dụng Angular của tôi lại 36kb khi browserslist của tôi chỉ là `last 1 Chrome version`?

Đây là các bước tôi đã thực hiện để tạo một ứng dụng Angular mẫu:

1. npm i -g @angular/cli (Đã cài đặt Angular 11.2)

2. ng new foo

3. Đăng ký sử dụng SASS, Angular Router và phân tích

4. cd foo

5. Thay thế nội dung của .browserslistrc bằng last 1 Chrome version. (Chạy npx browserslist sẽ chỉ in ra chrome 89, như mong đợi.)

6. ng build --prod

Đây là kết quả:

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

Tôi ngạc nhiên rằng nó biên dịch 36kb polyfills trong khi tất cả những gì tôi hỗ trợ là phiên bản mới nhất của Chrome. Theo cách nghĩ của tôi, điều này sẽ chỉ yêu cầu ít polyfills nếu có.

36kb này làm gì? Tôi khó có thể nhận biết vì tập tin đã được rút gọn.

Câu trả lời #1

Ngay cả khi bạn xóa .browserlistrc hoặc chú thích tất cả mọi thứ, bạn sẽ nhận được: 35.98 kB.

Chỉ với dòng lệnh đó, browserlist sẽ trở về giá trị của defaults, bao gồm: > 0.5%, 2 phiên bản gần nhất, Firefox ESR, không không dùng nữa

Lưu ý rằng các giá trị mặc định này chủ yếu liên quan đến việc hỗ trợ Zone.js, như bạn có thể tự thấy. Thử ng build mà không có cờ --prod và bạn sẽ nhận được một tệp polyfills được chú thích đẹp mắt: (Chỉ hiển thị vài dòng đầu tiên, cho .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
 */

Tìm hiểu thêm tại https://angular.io/guide/browser-support