Angular2：它慢吗？答案

【问题标题】：Angular2: Is it slow?Angular2：它慢吗？
【发布时间】：2015-03-08 12:57:51
【问题描述】：

刚刚查看了 Angular 团队发布的最后一个 Angular 版本。 Angular2 出来了，他们已经发布了他们的新网页https://angular.io。

在那里，他们有一个 5 分钟的快速入门项目，可以快速显示新语法以及执行新的 Angular 应用程序必须使用的内容。

我刚刚完成所有步骤以使其正常工作，但加载需要 4.93 秒。

我只是想知道，角度 2 有那么慢吗？或者我可能错过了一些步骤。

这是我的代码

// app.es6

import { Component, Template, bootstrap } from "angular2/angular2";

// Annotation section
@Component({
  selector: "my-app"
})
@Template({
  inline: "<h1>Hello {{ name }}</h1>"
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = "Alex!";
  }
}

bootstrap(MyAppComponent);

和index.html

<!-- index.html -->
<html>

<head>
    <title>Angular 2 Quickstart</title>
    <script src="dist/es6-shim.js"></script>
</head>

<body>

    <!-- The app component created in app.js -->
    <my-app></my-app>

    <script>
        // Rewrite the paths to load the files
          System.paths = {
            'angular2/*':'angular2/*.js', // Angular
            'rtts_assert/*': 'rtts_assert/*.js', //Runtime assertions
            'app': 'app.js' // The my-app component
          };

          // Kick off the application
          System.import('app');
    </script>
</body>

</html>

【问题讨论】：

由于 angular2 处于 alpha 预览阶段，他们不建议将其用于生产目的，您最好的资源可能是他们的 google 组或他们的实时聊天。此处提供的任何答案都是有限的，并且可能很快就会过时。
感谢@Claies 的资源！

标签： javascript google-chrome angular

【解决方案1】：

您正在使用 RTTS（运行时类型系统检查）运行它非常适合开发，但对于生产来说很慢
我们没有将所有文件连接成一个文件以实现快速加载。
我们仍然有缓慢的变化检测，因为快速的变化检测还没有在 Dart 中工作，我们希望保持一致。

请参阅https://github.com/djsmith42/angular2_calendar，了解如何让它快速运行。

【讨论】：

为了补充 Misko 的评论，我肯定会观看上周在 ng-conf 上发生的演讲，并在视频结尾“感受 Angular 2 的速度”：youtu.be/XQM0K6YG18s跨度>
考虑到 Angular2 现在处于测试阶段。它（来自 code.angular 的最小版本）在常规 3G 油门模式下需要约 6 秒来下载和加载。文件大小大于 1.x。更多，还有其他依赖。一旦退出测试版，以后会发生什么变化？这里很少担心加载时间。
@Gary 代码是否仍在使用即时转译？您必须将其预转译为 ES5 才能获得正常的加载速度。
不，之前正在转译。
@Misko 谢谢。如何在生产中停止 RTTS，我正在使用 webpack 配置，我的代码是 nk 行并且需要太多时间来加载，如何在生产中禁用它？我也在使用延迟加载插件，但这似乎只是有点帮助。你能告诉我吗。

【解决方案2】：

是的，使用 angular2 编写的页面很慢。

我并不是说 angular2 代码很慢（我不敢），只是您可以使用 angular 编写的最简单的页面将在 5 秒或更长时间内加载。有很多文件需要加载。确实，您可以通过合并文件来加快速度，从而减少 http 请求，并注意不要加载您不使用的内容，但它永远不会像简单的 html + js 页面那样快。

重要的是要记住，Angular 是为单页应用程序设计的。所有依赖项在单个索引文件中加载一次，从那时起，角度路由允许您导航到不同的“页面”，这些“页面”实际上只是模板文件。

换句话说，一旦完成了大的前期打击，它可以非常快，最重要的是，非常有成效。

【讨论】：

这不是真的。您可以使用延迟加载来设计您的应用程序，以便在页面加载期间仅加载您需要的内容。我们的应用有 20 个组件，加载需要 1 秒。
@gtzinos，你能给我看一个延迟加载的例子吗？我的应用程序有大约 25 个组件，加载需要大量时间。即使在初始加载之后。如果用户点击导航中的任何链接，页面重定向大约需要 10 秒。
当然。阅读此stackoverflow.com/questions/39228826/… 并检查此示例embed.plnkr.co/GSY4dvSFTOxXZMBgR6lF
说“5 秒”就像在软件中说“一百万年”。这是很多时间。 500ms 更像是它，即使那样我认为它可能比这更快。再说一次，99% 的表现缓慢还有其他原因。主要是非最优算法和缓慢的数据库查询。

【解决方案3】：

如果您逐行按照快速入门教程获取最新版本的 alpha27，它将会非常缓慢，因为 System.js 和 angular2.min.js 文件需要很长时间才能加载。如果您可以使用我们自己的服务器来托管它们，那就更好了。此外，从您的代码来看，您似乎使用的是 pre-alpha20 代码库。升级到 alpha27，速度快了很多。

【讨论】：