如何优化 Angular 应用的初始加载速度？

Question

此时，我的 Angular 13 应用程序的大小已最小化。应用 Gzip，数据传输减少到 720kb，现在 Lighthouse 要求我“最小化主线程工作”。我不确定这应该如何与 Angular 一起使用，所以我只是在这里发布它的结果。

“最小化主线程工作”的结果：

“减少 JavaScript 执行时间”的结果：

我想我应该减少 polyfills.js。我在 Internet 上进行了搜索，但没有找到有意义的解决方案。

到目前为止，我已经删除了我当前未使用的所有组件和大多数库，尝试了使用 Angular Universal 的 SSR，但后来发现它不适合，因为我需要在我的主页上进行一些 DOM 操作。此时我只需要加快我的初始主页加载速度，所以我忽略了它。 Gzip 是通过运行 express 服务器的 NodeJS 中间件应用的，以将内容从 /dist 发送到互联网，所以我认为加载缓慢的主要原因仍然是 js 部分。

如果有什么办法可以解决这个问题，请告诉我。提前致谢！

Answer 1

Lighthouse 报告中“减少 JavaScript 执行时间”的结果有点误导。您的 polyfill 包含 Zone.js，它修补了大部分 standard APIs，因此几乎所有应用程序中的 JavaScript 执行都分配给它。为了减少执行时间，我建议您使用 Chrome DevTools 性能选项卡到analyze the runtime performance 并优化潜在的瓶颈。

当您轮询数据时，UI 可能会非常频繁地更新，因此它还可以通过利用 OnPush strategy 来帮助避免不必要的更改检测。 您可以利用Angular DevTools 调查某个组件的变更检测的成本和频率。