任何人在使用 angular2 时都会遇到缓慢的加载时间答案

【问题标题】：Anyone experience slow loading times with angular2任何人在使用 angular2 时都会遇到缓慢的加载时间
【发布时间】：2017-04-19 16:04:45
【问题描述】：

我有一个带有 typescript 和 systemjs 的 Angular 两个应用程序。

我的应用程序只有 800kb，并且需要 4 秒才能长出一个只有文本的页面。

我所有的 js 和 css 都很小/缩小，我总共有 11 个请求，几乎没有任何图像

所有图像都经过压缩并在 cdn firebase 中。

我使用 firebase 托管并使用 cloudflare 来获得 ssl 和性能。

有没有人在加载和缓存方面遇到过较差的 angular2 性能。

我在速度方面也没有任何缓存改进。

以下是文件和加载时间的屏幕截图：

这是速度测试结果：https://www.webpagetest.org/result/161205_0H_S4H/

加载请求数：17（请参阅下面的加载网络选项卡屏幕截图）

【问题讨论】：

下载文件时每个请求需要多长时间？
您的网络标签在开发者工具中显示什么？
请求非常小。查看网络选项卡，它显示了 3 秒的延迟，它什么都不做
你能告诉我们基于developers.google.com/web/tools/chrome-devtools/…的什么没有吗？
@shusson 我添加了一个屏幕截图。此外，这是网址：thepoolcover.co.uk。我还添加了速度测试结果：webpagetest.org/result/161205_0H_S4H

【解决方案1】：

不要将 systemjs 用于生产。

使用提前 (AOT) 编译。

【讨论】：

谢谢，我去看看。为什么 systemjs 不适合生产环境？
如果使用得当，SystemJS 适用于生产环境。 SystemJS 支持按需延迟加载包。例如，当第一次需要模块时，您可以在鼠标单击中导入。此外，Angular2 路由器现在支持使用 SystemJS 延迟加载整个路由。如果您正确设置应用程序，SystemJS 绝对没问题。
@danday74 您能否添加一个链接到您引用的路由示例的链接，以便延迟加载路由，然后我将与我的比较。另外，我会将我的添加到上面的问题中
你问对人了 - 这是我专门编写的一些代码，只是为了探索路由的延迟加载 - github.com/danday74/angular2-router-modular/tree/master/app - 我也会找到你的文档链接
这里是文档的链接 - angular.io/docs/ts/latest/guide/… - 我的例子是最低限度的，应该很容易理解 - 文档非常冗长，而且不是那么清楚 - 使用你喜欢的任何一个 :) 上帝保佑

【解决方案2】：

这通常发生在开发人员对导入不小心时。这里的一个主要错误是当您只想使用其中的一小部分时导入整个 RxJS 库。

例如，你不应该导入 ..

import { Observable } from 'rxjs/Rx';

这会导入庞大的整个 RXJS 库。

import { Observable } from 'rxjs/Observable';

只会导入你需要的东西。

删除对“rxjs/Rx”的所有引用，您将看到页面加载时间大幅加快。

【讨论】：

我会检查我是否正在使用它。我不认为我是。
我没有使用 Observable
我使用了大量的 import observable。我只在一个地方加载了整个 Rx。用 Observable 替换它至少为我节省了 1.5 秒的启动时间。我还在想我能省多少钱....