2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家
大家好，开发者社区！👋
在我们从 YMS（从 Angular 16 迁移到 21）的迁移旅程中，我在第一篇文章中提到，编译时间和热重载速度大幅提升。开发体验跃升到了一个新的层次。但为什么会发生这种情况呢？
许多开发人员认为 Angular 在最近几个版本中“更换了编译器”。但这只是一个误解。要理解是什么真正让这个框架变得如此快速，我们需要区分在终端中运行的两个基本工具：编译器和打包器。
1. 澄清混淆：编译器 vs. 打包器
A. 编译器（Ivy）
编译器是翻译者。浏览器不理解 TypeScript，也不理解 Angular 的装饰器（@Component、@Injectable）或 HTML 模板语法（@if、{{ 变量 }}）。
Angular 编译器（称为 Ivy）的作用是读取这些代码并将其转换为纯 JavaScript 指令。
这里的关键点是：编译器并没有改变。Angular 从第 9 版开始就使用 Ivy。无论是我们在 Angular 16 中的遗留项目，还是 Angular 21 中的新版本，底层运行的都是完全相同的编译器。
B. 打包器
打包器是物流经理。当 Ivy 翻译完文件后，你会得到成千上万个分散的小 JS 文件。打包器会将所有这些文件收集起来，解析依赖关系（谁引用了谁），应用树摇（我们在上一篇文章中解释过），压缩代码，并将所有内容打包成一个或多个最终文件供浏览器下载。
而我们迁移的魔法就发生在这里：我们更换了物流经理。
2. 过去：Webpack 时代
在 Angular 16 中，打包应用程序的绝对标准是 Webpack。
Webpack 是一个出色的工具，但在开发模式下存在架构问题：它需要先构建整个应用程序，然后才能提供服务。
在我们像 YMS 这样沉重的企业系统中（充满各种屏幕、物流规则和密集的 PrimeNG 组件），Webpack 需要追踪数千个文件，编译所有内容，在内存中打包，然后才在 localhost 上显示页面。任何 CSS 的更改都会导致 Webpack 重新计算这个巨大包的一大部分。结果是什么？盯着终端等待重载数秒（甚至数分钟）。
3. 现在：Esbuild + Vite 的革命
从较新的版本开始（在 17+ 中巩固为标准），Angular 抛弃了 Webpack，并使用两个极其快速的工具重写了其整个构建流程：Esbuild和Vite。
- Esbuild：这是一个用 Go 语言（一种编译型高性能语言）编写的打包器。与用 JavaScript 编写的 Webpack 不同，Esbuild 利用处理器的所有核心并行处理工作。它在几毫秒内就能构建沉重的依赖项（如 PrimeNG 或 RxJS）。
-
Vite：这是开发模式（
ng serve）中的明星。Vite 颠覆了 Webpack 的逻辑。它不在启动前构建整个应用程序。它会立即启动服务器，并让浏览器按需请求文件（使用原生 ES 模块）。如果你在“登录”页面，Vite 只会要求 Angular 编译并提供登录相关的文件。YMS 的其余部分将被忽略，直到你免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
