AngularJS 性能与页面大小答案

【问题标题】：AngularJS Performance vs Page SizeAngularJS 性能与页面大小
【发布时间】：2019-06-19 02:24:12
【问题描述】：

我的网站压缩后约为 500 KB，包括 js、css 和图像。它建立在 AngularJS 之上。我公司的很多人都在抱怨网站在较低的带宽下速度很慢。有几个问题希望得到解答，

对于较低的带宽来说，500KB Gzip 是否太高？人们声称它需要 20 秒才能加载到他们的机器上，我认为这是夸大其词。真的是由于 anugularJS 及其评估时间的原因吗？
应用程序的大小在较低带宽中有何影响？如果我的网站是 500KB，如果我通过制作自定义框架将其减少到 150KB，它真的可以帮助我降低带宽吗？如果有，多少钱？

【问题讨论】：

您是否缓存了模板？还是 angularjs 逐个获取每个模板？尝试捆绑您的整个应用程序，您应该有 2 个请求： angular.min.js 和 app.min.js 。见 gulp 模板缓存
让我们考虑未缓存的。由于该网站始终以隐身模式启动。
使用这个npmjs.com/package/gulp-templatecache，它将把你的模板集成到js文件中，不再需要获取模板的请求。大幅增加应用的启动速度。

标签： angularjs performance pagespeed bandwidth

【解决方案1】：

由于angular.js 本身的压缩大小为 57kb，因此这个初始页面调用的加载量似乎要大得多，大约是 angular.js 大小的 10 倍。

要减少页面加载时间，请尝试创建 javascript 功能块，其中仅包含例如所需的功能。索引页面以减少加载时间。

例如，当您使用 Webpack 时，建议的默认最大文件大小约为 244kb see here

【讨论】：

【解决方案2】：

这都是主观的，“低带宽”的定义相当广泛。但是...使用https://www.download-time.com/，您可以大致了解在不同带宽上下载 500Kb 需要多长时间。

因此，在任何高于 512Kbps 的连接上（最低 aDSL 速度，现在大多数都优于 5Mbps，3G 移动也差不多），文件大小不太可能是问题。

如果“低带宽”也意味着“有限的硬件”（RAM、CPU），则性能问题可能在于解压缩和处理您的应用程序。 Angular 反应灵敏，但低端硬件可能会遇到困难。

上述根本原因证明使用您自己的自定义框架重写应用程序是合理的。

然而，最可能的问题是您的 Angular 应用程序在初始化时需要的任何资产/资源/模板 - 图像、JSON 文件等。如果没有具体细节，这很难弄清楚 - 每个应用程序都不同。好消息是您不需要重写您的应用程序 - 您应该能够使用现有的应用程序并对其进行调整。我假设 500Kb 应用程序在不重写的情况下无法显着减小大小，并且速度问题归结为作为启动的一部分加载额外的资产。

我会使用 Google Chrome 的开发者工具来查看发生了什么。 “性能”选项卡有一个选项来模拟各种类型的网络条件。 “网络”选项卡允许您查看加载了哪些资产，以及它们需要多长时间。我会看看哪些资产需要时间，看看哪些可以延迟加载。例如，如果应用程序在启动时加载了一个非常大的图像文件，那么这可能是延迟加载的，从而使应用程序可以更快地响应最终用户。提高感知性能的常用方法是使用lazy loading。

【讨论】：

有道理。现在让我们忽略硬件因素。在当今互联网速度如此发达的世界中，考虑延迟加载 500kb 真的很重要吗？
我试图澄清我的答案。我假设启动速度慢是由于您的 500K 应用程序中的代码在应用程序启动时加载了额外的资产。如果是这样，延迟加载肯定会有所帮助。我认为将现有的 500K 应用程序转换为延迟加载不会给您带来太多好处。

【解决方案3】：

要减少加载时间，只需处理缓存并找到合适的下载工具来计算文件的下载速度。您可以使用https://downloadtime.org 作为参考。如果您有任何问题，请告诉我。此外，为了减少页面加载时间，请尝试创建您的 javascript 功能块，这些功能块仅包含例如所需的功能。索引页面以减少加载时间。

【讨论】：