Angular 18切换Esbuild后，构建Chunk大小与本地加载大小不符

核心原因：构建日志的大小统计逻辑差异 #

Angular 18切换到esbuild后，生产构建日志默认展示的是gzip压缩后的文件大小，而你之前使用webpack时，日志默认展示的是经过代码压缩（minify）但未做传输压缩的原始文件大小——这就是两者数值差异巨大的根本原因。

具体细节 #

• 你看到的esbuild构建日志里main chunk为309.90kB、profile懒加载模块为6.40kB，都是gzip压缩后的最终传输大小，这是Angular为了直观展示部署后的真实性能表现，默认启用的统计逻辑。
• 本地运行时，除非手动给本地服务器配置gzip/brotli压缩，否则浏览器加载的是dist目录里仅经过代码压缩但未做传输压缩的原始文件，所以大小会接近1.7MB和39.2kB，这和dist目录里的实际文件大小完全一致。
• webpack时期日志和浏览器加载大小接近，是因为webpack默认不把传输压缩后的大小作为日志统计项，直接展示代码压缩后的原始大小，和本地未开启传输压缩时的加载大小匹配。

验证方法 #

1. 打开项目的dist目录，查看main.js和profile.*.js的实际文件大小，会和浏览器加载的1.7MB、39.2kB一致。
2. 用gzip工具压缩这些文件：执行gzip -k dist/main.js，查看生成的main.js.gz大小，会和构建日志里的309.90kB基本吻合。

总结 #

这是完全正常的行为，并非配置错误，只是Angular切换到esbuild后，构建日志的大小统计维度更贴近生产部署的真实传输场景了。如果需要在本地运行时也体验压缩后的加载大小，可以给本地静态服务器添加gzip压缩配置（比如使用http-server -g启动服务）。

内容的提问来源于stack exchange，提问作者Cody Pritchard