Angular7缓慢的页面加载答案

【问题标题】：Angular7 slow page loadAngular7缓慢的页面加载
【发布时间】：2020-11-22 17:15:24
【问题描述】：

我有一个传递给我的 Angular7 应用程序。第一次内容丰富的绘画和互动时间约为 6 秒！在https://www.google-analytics.com/collect 和https://fonts.gstatic.com/s/opensans API 调用上似乎停顿（挂起）大约 4 秒，我发现这与谷歌字体有关。但这可能不是失速的原因。我尝试使用延迟加载模块来缩小捆绑包。目前我们在：styles.css 465B，runtime.js 1.1kB，polyfills.js 36kB，styles.js 10kB，vendor.js 583kB，main.js 142kB。捆绑包大小似乎不是问题，但浏览器（chrome）在用户看到主页之前仍会停止 6 秒。有人有什么建议吗？

我也查看了 SSR，但考虑到我们使用 dist 中的内容在 AWS S3 上提供服务，设置似乎非常复杂。我正在构建：

ng build --outputHashing=all --prod

请帮忙。在尝试 SSR 之前，我想确保没有什么可以改进的。谢谢！

【问题讨论】：

标签： javascript angular angular7 angular7-router

【解决方案1】：

首先，您可以尝试将 Angular 版本更新到最新版本，因为它带来了性能升级和错误修复。这就是我在 SSR 之前会做的事情。尽管如此，如果您想要更好的用户体验，SSR 是“必须的”。考虑到您的捆绑包大小，它并没有那么大。我的应用程序是您的应用程序的三倍大小，并且加载速度更快。正如我所说，到目前为止，我在服务器 (SSR) 上渲染并使用 v9。但是没有任何代码示例很难回答这个问题。

干杯！

【讨论】：

谢谢。基于update.angular.io，看起来从 7.2 到 9.1 有很多变化。对于 SSR，有什么关于如何在 AWS 上运行的建议吗？我们目前使用 S3 作为在 /dist 中托管我们的内容的网络。我读过 Universal，我们可能需要 lambda 或 EC2 来建立服务器，例如节点或heroku。
是的，他们在性能方面做了一些从 v7 到 v9（现在是 v10）的更改。我没有在 AWS 上部署 Angular 应用程序的任何经验，但这里是链接：levelup.gitconnected.com/…

【解决方案2】：

您可以尝试稍微优化您的代码，并在构建时使用AOT compilation mode。

我找到了一篇不错的文章，您可以对此进行探索，并了解您可以通过哪些方式来改进代码并减少加载时间。 https://www.dotnettricks.com/learn/angular/tips-to-optimize-your-angular-application

【讨论】：

谢谢。我读过这篇文章，似乎 --prod 在 Angular7 中默认使用 aot。