代码之家 › 专栏 › 技术社区 › Cody Pritchard

Angular-Esbuild区块大小与服务时的构建输出不匹配

esbuild angular-cli webpack angular

0

Cody Pritchard · 技术社区 · 1 年前

我最近将我的Angular应用程序切换到了v18,并从webpack转移到了esbuild。然而,当将我的块大小与代码分割进行比较时,我发现这些大小没有意义。

当使用webpack时,我的生产版本提供

然后在浏览器中加载时,下载的大小至少相似

例如,main的原始大小为1.42MB,在浏览器中显示1.5MB。同样,我的懒惰加载配置文件功能显示5.81kB的原始加载和6.4kB的浏览器内加载。虽然不完全相同,但它们的大小至少相似。

现在,当在没有任何更改或自定义的情况下使用esbuild时,我看到了用于生产构建的这些块大小

然后在浏览器中,我实际加载的大小要大得多

Build显示main的原始大小为309.90kB,profile功能为6.40kB,但现在下载的大小明显更高,分别为1.7MB和39.2kB。这适用于每一块,而不仅仅是这两块。

这是在本地生产构建中提供的。据我所知,估计的传输大小是指在实际部署环境中对所有内容进行gzip映射并提供服务的情况。但是,为什么在构建和使用esbuild与webpack时,本地的大小要大得多?

这是正常的吗,还是有什么我不理解的地方?

1 回复 | 直到 1 年前

1

JSON Derulo 1 年前

通过使用 ng serve ,无论使用何种配置,显示的块大小都不能反映开发服务器的实际文件大小。Angular CLI GitHub存储库中已经报告了此问题: https://github.com/angular/angular-cli/issues/27645 在那里,Angular团队回答道:

开发服务器可以在运行时(通常应要求)执行代码转换,以支持开发工作流,如HMR、依赖项预绑定、调试等。下载的大小不一定与初始构建的大小匹配,也不打算在开发服务器中这样做。虽然可以在开发服务器上使用生产配置,但其结果仍然是面向开发的浏览器体验。

运行时 ng build 使用生产配置并打开一个承载文件的简单服务器,块大小应该是准确的。