Angular 可以在构建时缩小、压缩和删除未使用的 JS 和 CSS 文件吗？

Question

我有一个

Angular 16

应用程序，它使用

progressive web app

(PWA) 功能和

server-side rendering

。我们还将大部分组件更新为独立和延迟加载的模块。

自从 Google 最近更改了索引规则以来，我们一直在努力改进 FCP/LCP。

有没有办法在构建时缩小、压缩和删除未使用的 JS 和 CSS 文件，以确保 PWA 兼容性并实现更好的 FCP/LCP 表示法？

Answer 1

您的问题太复杂，很难回答。有很多变量会影响应用程序的负载性能。但我会尽力为您提供快速概述。

1. Angular 可以删除未使用的 JS 和 CSS 吗？ （长；博士：是的）

从技术上讲不是 Angular，但使用的捆绑器可以删除未使用的代码。如果您使用 Angular CLI 构建它，如果您正在进行生产构建，它会默认执行此操作。该功能称为 Tree Shaking，webpack 和 esbuild 都在这样做。

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination.

但是，Tree Shaking 的效果在很大程度上取决于您的代码结构以及您使用的库。
仅举一些常见错误：

• 向全局添加太多样式

  styles.css

  。 => 尝试将样式保留在真正需要它的组件中。
• 将 SCSS 导入用于组件样式中除 mixin 之外的任何内容。由于每个组件的样式都是单独编译的，因此相同的样式可能会在构建工件中多次出现。 => 尝试使用组件来共享样式。
• 使用不可摇树的库。 => 尽量保持较小的第三方库数量，并确保您使用的库不会增加太多重量。

使用捆绑包分析器检查捆绑包大小并检查可以删除哪些内容以优化捆绑包大小的最佳方法。 仅供参考，即使对于极其复杂的应用程序，

Estimated transfer size

的缩小版也可以在 160-180kb 左右。您可以检查

Angular CLI

) 构建的输出以获取当前值。但是，很可能需要额外的块来显示页面的 LCP。2. Angular 可以缩小 JS 和 CSS 代码。 （长；博士：是的） 再次由捆绑程序负责缩小。对于

Angular CLI

），您可以在“Angular 工作区配置”中的

“优化配置”

中进行配置。 Initial chunk files 2. Angular 可以压缩 JS 和 CSS 代码。 （长；博士：不）

压缩既不属于 Angular 也不属于捆绑者的责任。但是，通常您的 CDN 可以在传送源文件之前对其进行动态压缩。为了获得更高的压缩比，最好创建静态预压缩的 brotli 文件。虽然大多数（但不是所有）客户端都支持 brotli，但请务必仅将预压缩文件传递给支持它的客户端。

附加信息

有了

The optimization option can be either a Boolean or an Object for more fine-tune configuration. This option enables various optimizations of the build output, including:

Minification of scripts and styles
Tree-shaking
Dead-code elimination
Inlining of critical CSS
Fonts inlining

和正确的缓存，你的 FCP 和 LCP 应该不会成为问题，因为 LCP 通常可以在你的应用程序加载 JS 代码之前显示。但是，

与下一个绘制的交互 (INP)
• 对于 SSR 来说可能会出现更多问题，因为用户可能会在页面仍在水合时尝试与页面交互。要在没有 SSR 的情况下改进 FCP，您可以使用加载旋转器。对于用户体验来说，如果加载确实需要超过 1 秒的时间，最好只显示它。 如果您更新到 Angular 17，您可以使用 Angular
Deferrable Views
• 轻松延迟加载 LCP 不需要的组件。
server-side rendering (SSR)
• 但是，请注意，可延迟视图不会在 SSR 中呈现，因此对于 SEO 相关内容来说可能会出现问题。

  Deferrable views can be used in component template to defer the loading of select dependencies within that template.