### 文章概述

一段简要概览：Angular CLI 在执行 `ng build --configuration production` 时，会调用内部的 *browser-esbuild* 或历史版本的 *browser-webpack* builder。构建器根据 `browserslist` 与 `angular.json` 的 `polyfills` 配置，收集 `core-js`、`zone.js` 以及开发者显式导入的其他垫片，然后借助 *esbuild/webpack* 做智能拆包，生成形如 `<module_name>.polyfills.js` 的独立 chunk。浏览器加载这段脚本以后，即便目标环境不支持最新 ECMAScript 或 Web API，Angular 运行时代码与业务代码也能维持一致行为。文件最终随 `dist/<app name>` 目录一起被部署到生产静态资源服务器，于是你在 URL 中就能看到 `/static-resources/dist/<app name>/<module_name>.polyfills.js` 这样的路径。([angular.io](https://angular.io/guide/esbuild?utm_source=chatgpt.com "Getting started with the Angular CLI's new build system"), [angular.dev](https://angular.dev/cli/build?utm_source=chatgpt.com "ng build - Angular"), [angular.dev](https://angular.dev/tools/cli/build-system-migration?utm_source=chatgpt.com "Migrating to new build system - Angular"))

* * *

## 构建流程与生成时机

### CLI 入口

运行 `ng build --configuration production --outputHashing=all` 时，Angular CLI 首先解析项目根部的 `angular.json`。如果项目已手动迁移，`builder` 字段会指向 `@angular-devkit/build-angular:browser-esbuild`；若仍在旧链路，则是 `browser`（webpack 版）。两者都会读取同一份 `browserslist` 以确定目标浏览器集合。([angular.io](https://angular.io/guide/esbuild?utm_source=chatgpt.com "Getting started with the Angular CLI's new build system"), [angular.dev](https://angular.dev/cli/build?utm_source=chatgpt.com "ng build - Angular"))

### Polyfill 收集阶段

1.  **自动扫描**：CLI 根据 `browserslist` 结果比对内置表，确定哪些新语法在目标浏览器缺失。例如 `Promise.allSettled`、`Intl.RelativeTimeFormat` 等。([angular.dev](https://angular.dev/cli/build?utm_source=chatgpt.com "ng build - Angular"), [stackoverflow.com](https://stackoverflow.com/questions/74905415/polyfills-ts-does-not-get-created-with-ng-new-project-with-the-angular-cli/76100353?utm_source=chatgpt.com "polyfills.ts does not get created with ng new <project> with the ..."))

2.  **静态入口**：`src/polyfills.ts`（Angular ≤ 14）或 `angular.json > options > polyfills`（Angular ≥ 15）列出的模块会被强制打包。默认包含 `zone.js`，而 `core-js` 的各个子模块按需插入。([github.com](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_webpack/test/angular-app/src/polyfills.ts?utm_source=chatgpt.com "polyfills.ts - angular/angular-cli - GitHub"), [stackoverflow.com](https://stackoverflow.com/questions/74905415/polyfills-ts-does-not-get-created-with-ng-new-project-with-the-angular-cli/76100353?utm_source=chatgpt.com "polyfills.ts does not get created with ng new <project> with the ..."), [frontendinterviewquestions.medium.com](https://frontendinterviewquestions.medium.com/what-is-the-use-of-polyfills-in-angular-02b258ad1c5c?utm_source=chatgpt.com "What is the use of polyfills in Angular? | by Pravin M - Medium"))

3.  **用户自定义**：开发者可以在 `polyfills.ts` 手动引入诸如 `classlist.js`、`web-animations-js` 之类的第三方垫片，以兼容极老的浏览器或特定嵌入式 WebView。([github.com](https://github.com/retejs/examples/blob/master/Angular/src/polyfills.ts?utm_source=chatgpt.com "examples/Angular/src/polyfills.ts at master - GitHub"), [github.com](https://github.com/zloirock/core-js/issues/1377?utm_source=chatgpt.com "Question: how to automatically manage polyfills imports · Issue #1377"))

### Chunk 拆分

构建器随后为主入口、懒加载模块与公共依赖各生成独立 bundle。`polyfills` 被单独拆出有三点理由：

*   **浏览器缓存**：垫片代码几乎与业务无关，单独文件能长期命中缓存。([chitaranjanbiswal93.medium.com](https://chitaranjanbiswal93.medium.com/understanding-vendor-js-polyfill-js-style-css-main-js-and-runtime-js-in-an-angular-application-d060e4fce2fa?utm_source=chatgpt.com "Understanding Vendor.js, Polyfill.js, Style.css, Main.js, and Runtime ..."), [telerik.com](https://www.telerik.com/blogs/speed-up-angular-application-code-splitting?utm_source=chatgpt.com "Speed Up Your Angular Application with Code Splitting - Telerik.com"))

*   **首屏体积**：现代浏览器已原生支持大量 API，利用 `browserslist` 过滤后，生成文件体积通常远小于历史时期的“全量垫片”。([medium.com](https://medium.com/%40dhokaichintan/how-polyfills-and-zone-js-keep-your-angular-app-running-smoothly-0583ec129faa?utm_source=chatgpt.com "How Polyfills and Zone.js Keep Your Angular App Running Smoothly"), [izifortune.com](https://izifortune.com/angular-polyfill-strategies/?utm_source=chatgpt.com "Angular polyfill strategies - Fabrizio Fortunato"))

*   **并行加载**：HTTP/2 多路复用下，多文件能并行下载，加快解析速度。([telerik.com](https://www.telerik.com/blogs/speed-up-angular-application-code-splitting?utm_source=chatgpt.com "Speed Up Your Angular Application with Code Splitting - Telerik.com"))

* * *

## 路径与文件命名的由来

### `<module_name>` 占位符

在单仓库多应用或微前端场景中，CLI 会为每个独立 *lazy module* 产生一组文件，并将模块名称加入文件前缀以便 Runtime loader 能够按组件路由动态注入对应资源。这就是你观察到 `<module_name>.polyfills.js` 的原因。([stackoverflow.com](https://stackoverflow.com/questions/63228031/angular-how-to-do-code-splitting-in-angular-9-ivy?utm_source=chatgpt.com "How to do code-splitting in Angular 9 - Ivy? - Stack Overflow"), [stackoverflow.com](https://stackoverflow.com/questions/49752929/why-chunk-files-are-generated-when-the-ng-build-prod-command-is-isssued-in?utm_source=chatgpt.com "angular2 services - Why Chunk files are generated ,when the "ng build"))

### `static-resources/dist/...` 路径

许多企业框架（例如 SAP Commerce Spartacus、Adobe AEM SPA、Spring Boot 前后端同仓库部署方案等）会把 Angular 构建产物复制到服务器约定的 `static-resources` 目录，再配合反向代理暴露为 `/static-resources/dist/...`。因此，浏览器加载的是反向代理拼接后的最终 URL，而不一定是磁盘上的原始路径。([stackoverflow.com](https://stackoverflow.com/questions/67744630/ng-build-generating-different-outputs?utm_source=chatgpt.com "ng build generating different outputs - Stack Overflow"))

* * *

## Polyfills 内部内容与运行机制

### `core-js`

`core-js` 提供 ES2015–ES2023 各阶段语法与全局对象垫片。构建器只会注入浏览器缺失的部分，例如 `Array.prototype.at`、`Promise.any`。([frontendinterviewquestions.medium.com](https://frontendinterviewquestions.medium.com/what-is-the-use-of-polyfills-in-angular-02b258ad1c5c?utm_source=chatgpt.com "What is the use of polyfills in Angular? | by Pravin M - Medium"), [github.com](https://github.com/zloirock/core-js/issues/1377?utm_source=chatgpt.com "Question: how to automatically manage polyfills imports · Issue #1377"))

### `zone.js`

`zone.js` monkey-patches 微任务与宏任务 API（`setTimeout`、`Promise.then`、`addEventListener` 等），令 Angular 在事件循环每次结束后快速得知“哪段代码刚刚运行完”，进而触发变更检测。([dev.to](https://dev.to/chintanonweb/understanding-angular-polyfills-and-the-role-of-zonejs-48mi?utm_source=chatgpt.com "Understanding Angular Polyfills and the Role of Zone.js"), [medium.com](https://medium.com/%40dhokaichintan/how-polyfills-and-zone-js-keep-your-angular-app-running-smoothly-0583ec129faa?utm_source=chatgpt.com "How Polyfills and Zone.js Keep Your Angular App Running Smoothly"))

### 其它可选垫片

*   `web-animations-js`：旧版 Safari 对 CSS Animation/Transition API 支持不完整时使用。

*   `intl`：Node 和 IE11 缺少的国际化日期/数字格式化。

*   `classlist.js`：SVG 元素不支持 `classList` 的老旧浏览器。([discuss.boardinfinity.com](https://discuss.boardinfinity.com/t/how-to-use-polyfills-in-angular-application/6415?utm_source=chatgpt.com "How to use polyfills in Angular application? - Board Infinity"), [iq.js.org](https://iq.js.org/questions/angular/how-to-use-polyfills-in-angular-application?utm_source=chatgpt.com "How to use polyfills in Angular application?"))

* * *

## 生产环境为何必须携带该文件

1.  **跨浏览器稳定性**：业务代码可直接调用高级语法，无需运行时特性检测。([iq.js.org](https://iq.js.org/questions/angular/how-to-use-polyfills-in-angular-application?utm_source=chatgpt.com "How to use polyfills in Angular application?"), [medium.com](https://medium.com/%40dhokaichintan/how-polyfills-and-zone-js-keep-your-angular-app-running-smoothly-0583ec129faa?utm_source=chatgpt.com "How Polyfills and Zone.js Keep Your Angular App Running Smoothly"))

2.  **框架完整功能**：Angular 自身依赖异步钩子、反射元数据等垫片，移除将导致核心功能失效。

3.  **安全更新**：CLI 若检测到浏览器已原生实现某 API，会在下次构建时自动剔除对应垫片，避免冗余代码与潜在安全漏洞。([angular.dev](https://angular.dev/cli/build?utm_source=chatgpt.com "ng build - Angular"))

* * *

## 可运行示例工程

> 下列步骤在 Node 20 + Angular 17 环境测试通过，展示 `.polyfills.js` 生成的全过程。

```
# 1\. 创建项目
npx @angular/cli@17 ng new polyfills-demo --routing --style css
cd polyfills-demo

# 2\. 强制生成独立 polyfills.ts 便于演示
ng generate app-shell --name dummy   # 随便执行一个生成命令后再手动创建
echo "import 'core-js/es/array/at';" >> src/polyfills.ts

# 3\. 设置目标浏览器
echo "last 2 Chrome versions\nSafari 12" > .browserslistrc

# 4\. 生产构建
ng build --configuration production --outputHashing=all

```

构建成功后，`dist/polyfills-demo/` 目录类似：

```
main.3f4d2cbd.js
runtime.8245b4d0.js
styles.8f0a228c.css
dummy.polyfills.3df8c998.js   <-- 注意文件名
dummy.esm2022.90ac4f7d.js
...

```

其中 `dummy.polyfills.3df8c998.js` 的体积仅 5 KB，因为 `browserslist` 指定了较新浏览器，仅注入了 `core-js/array/at` 与 `zone.js` 的最小补丁。将整包部署到任何支持静态文件的 Web 服务器（如 Nginx、Express、Spring Static Resource Handler），浏览器就会自动请求该文件。([telerik.com](https://www.telerik.com/blogs/speed-up-angular-application-code-splitting?utm_source=chatgpt.com "Speed Up Your Angular Application with Code Splitting - Telerik.com"), [medium.com](https://medium.com/%40dhokaichintan/how-polyfills-and-zone-js-keep-your-angular-app-running-smoothly-0583ec129faa?utm_source=chatgpt.com "How Polyfills and Zone.js Keep Your Angular App Running Smoothly"))

* * *

## 常见变种与排障思路

*   **文件缺失 404**
    检查服务器是否配置了 `try_files` 或 URL 重写，将 Angular 路由误认为静态路径。([stackoverflow.com](https://stackoverflow.com/questions/67744630/ng-build-generating-different-outputs?utm_source=chatgpt.com "ng build generating different outputs - Stack Overflow"))

*   **构建产物找不到 `polyfills.js`**
    如果你升级到 Angular 15+ 并启用了 `es2022` 输出，CLI 可能直接内联少量垫片到主入口，不再生成独立文件。可通过 `--polyfills` 显式开启。([stackoverflow.com](https://stackoverflow.com/questions/74905415/polyfills-ts-does-not-get-created-with-ng-new-project-with-the-angular-cli/76100353?utm_source=chatgpt.com "polyfills.ts does not get created with ng new <project> with the ..."))

*   **Node.js 核心模块 Polyfill 警告**
    webpack 5 不再默认注入 Node 核心模块垫片；如需在浏览器侧使用 `crypto`、`stream` 等，需要 `fallback` 配置或第三方包。([reddit.com](https://www.reddit.com/r/angular/comments/14nb6fu/first_time_encountering_polyfill_error_how_do_i/?utm_source=chatgpt.com "First time encountering Polyfill error, how do I resolve it? - Reddit"))

* * *

## 结语

`<module_name>.polyfills.js` 并非多余文件，而是 Angular 针对目标浏览器差异精心裁剪的兼容层。理解它的生成机制与加载方式，能够帮助团队更好地优化包体积、加快首屏加载，同时避免因随意删除垫片而引发线上回归。若要进一步提升性能，可结合 `esbuild` 的 *supported* 选项、动态分块策略与条件 Polyfill（如 `polyfill.io`）做更细粒度的裁剪，但在企业环境中保留由 CLI 自动生成的 `polyfills` chunk 依旧是最稳妥、安全的做法。


一段简要概览：Angular CLI 在执行 ng build --configuration production 时，会调用内部的 browser-esbuild 或历史版本的 browser-webpack builder。构建器根据 browserslist 与 angular.json 的 polyfills 配置，收集 core-js、zone.js 以及开发者显式导入的其他垫片，然后借助 esbuild/webpack 做智能拆包，生成形如 <module_name>.polyfills.js 的独立 chunk。浏览器加载这段脚本以后，即便目标环境不支持最新 ECMAScript 或 Web API，Angular 运行时代码与业务代码也能维持一致行为。文件最终随 dist/<app name> 目录一起被部署到生产静态资源服务器，于是你在 URL 中就能看到 /static-resources/dist/<app name>/<module_name>.polyfills.js 这样的路径。(angular.io, angular.dev, angular.dev)

polyfills.js 文件生成时机、机制与作用解析

一段简要概览：Angular CLI 在执行 ng build --configuration production 时，会调用内部的 browser-esbuild 或历史版本的 browser-webpack builder。构建器根据 browserslist 与 angular.json 的 polyfills 配置，收集 core-js、zone.js 以及开发者显式导入的其他垫片，然后

紫薇堂堂主

前端

开发工具

Angular CLI构建时自动生成polyfills.js文件，包含core-js、zone.js等垫片代码，确保应用在老旧浏览器中正常运行。通过browserslist智能筛选目标环境缺失的API，优化文件体积并支持缓存。构建产物部署到静态资源服务器，提升应用兼容性和性能表现。

服务器

路由

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

polyfills.js 文件生成时机、机制与作用解析-腾讯云开发者社区-腾讯云

polyfills.js 文件生成时机、机制与作用解析

polyfills.js 文件生成时机、机制与作用解析

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐