如何加快 Angular 7 中初始加载的加载时间？

Posted 2023-03-15

【中文标题】如何加快 Angular 7 中初始加载的加载时间？

【英文标题】：How to speed up loading time on initial load in Angular 7?

【发布时间】：2020-11-21 21:59:30

【问题描述】：

我创建了 Angular 应用程序，并将单个模块拆分为一组较小的功能模块并延迟加载它们。并从索引中删除了不必要的脚本和样式.html 并在组件级别加载它。最终部署文件后第一次加载时间太慢，

我已尝试使用 --prod 现在文件大小约为 3MB 有没有其他可以加快速度的方法

下面是我的构建文件大小的屏幕截图 enter image description here

【问题讨论】：

在那个文件块 33 js 文件大小比较多，如何减小？

您是否尝试过减小图像尺寸并删除不需要的资产。我希望你正在使用 AOT

@RahulCv 是的，我已经从资产中删除了不需要的图像，文件大小也变小了。我的主要问题是那个文件块 33 js 文件大小（在那个图像中）更多如何减少它？

你现在使用什么延迟加载策略？在这种情况下你不能使用 Eager 延迟加载

【参考方案1】：

速度优化不仅仅依赖于延迟加载。

如果您确定优化了代码，删除了不必要的导入、样式、脚本，那么您必须应用其他解决方案，例如：

将所有子路由设为延迟加载。 使用 Angular Universal 进行服务器端渲染 从您的服务器提供预压缩的内容。如果使用 nginx 部署它，则可以启用 Gzip 压缩。 更新静态资产的缓存策略。这也应该从服务器端进行配置。 图像延迟加载。如果第一页上有多个图像，则首先仅加载可见图像，然后在滚动时加载其他图像。你可以找到一个 Angular 模块。 仅在需要时加载外部脚本。

还有更多的技术可以用于提高速度。

您可以使用Lighthouse 或GTmetrix 测试您的应用。这些工具会建议您应用解决方案，您可以按照它们进行操作。

【讨论】：

我尝试了 gzip 并压缩了所有 file.gz 格式，但不知道必须将哪个文件上传到服务器才能生效。当我压缩它时，每个文件显示两个文件。一个正常，另一个一个压缩。

你可以只压缩所有文件，所以基本上你用ng build --prod和gzip所有js、css和html文件在dist中构建应用程序

我正在使用 filezilla 应用程序让网站上线，所以当文件我必须上传 .gz 文件或 .js 文件时

你只上传.gz文件

这是因为你没有配置你的服务器。你用什么来部署？