在angularJS 2中，如何优化.js库加载以使应用程序快速启动？

我正在使用AngularJS 2开发2个应用程序。我选择angular2是因为它速度快，而且比angular1有许多其他优势。但我面临应用程序初始加载速度的问题。它加载了大量javascript文件，这些文件主要与RxJs相关。有什么方法可以优化它吗？

在开发过程中，这是很常见的，因为您已经注意到，有很多文件需要加载，这占用了大部分加载时间。为了更快地加载应用程序的分布式版本，有两种方法可供选择：

选项1：使用捆绑机 如果您正确地绑定了文件，通常会得到一个或两个js文件，它们的执行速度通常非常快。一个包含所有外部库的文件，如angular2、RxJs、lodash等。。和一个包含你的应用程序的文件（或者你可以将所有内容都放在一个文件中）。 像webpack或SystemJS这样的绑定器通常也只打包应用程序所需的库的那些部分。因此，以RxJs为例，大多数部分可能会被忽略，我猜您的应用程序只需要所有可用RxJs组件中的大约4-5个组件

要开始捆绑应用程序，您可能需要查看以下捆绑程序之一：

• 网页：
• SystemJS：
• JSPM：
• 或者看看这里的比较：

每个bundler都有其优缺点，这主要取决于应用程序的需求以及您最擅长的工作

就我个人而言，我对webpack非常满意，它涵盖了大多数情况，并且很容易启动和运行基本配置

---

选项2：使用种子项目或生成器 如果您不想设置自己的bundler，您可以始终使用已配置的bundler附带的种子样板来启动项目。 举几个例子：

• SystemJS：
• 网页：
• 大口喝：

此选项基本上是利用Option1，但无需进行捆绑机设置/配置。如果您对这件事还不熟悉，并且已经在努力了解所有新的angular2和rxjs概念，这将非常有帮助。然而，要真正了解事情是如何从头到尾工作的，并了解所有这些伟大的工具，我建议您至少配置一次捆绑包

---

添加：AOT（提前）编译 如果您已经将所有源代码捆绑到一个包中，并且在应用程序出现之前仍然会遇到初始延迟，那么您可以将AOT编译集成到构建周期中（）

下面是一个好处列表（摘自上面链接的Angular2食谱）

快速渲染

使用AoT，浏览器下载预编译版本的 应用浏览器加载可执行代码，以便能够呈现 立即应用程序，无需等待首先编译应用程序

更少的异步请求

编译器内联外部html模板和css样式表 在应用程序JavaScript中，消除单独的ajax请求 对于那些源文件

较小的角度框架下载大小

如果应用程序已经启动，则无需下载Angular编译器 编译。编译器本身大约是Angular的一半，因此省略了 它大大减少了应用程序负载

更早地检测模板错误

AoT编译器在执行过程中检测并报告模板绑定错误 在用户可以看到它们之前执行构建步骤

更好的安全性

AoT将HTML模板和组件编译成JavaScript文件 在送达客户之前。没有要阅读的模板，也没有 有风险的客户端HTML或JavaScript评估 注射攻击的机会

---

添加#2:Angular2的服务器端渲染-“通用” 作为一个附加选项，您可以实现一个服务器，在服务器上预渲染angular2应用程序，以便立即显示内容。 有关更多信息，请查看：

---

---

这是一个框架项目，它实现了（可选）AOT编译和通用（服务器端呈现）：

对于找到此答案的其他人，请注意，提前编译是通过预编译模板来提高速度的另一种途径。没错，我刚刚更新了答案，虽然最初的问题更多的是关于加载多个单一源文件的问题，但我在最近的一个“angular2很慢”问题中遇到了这个问题，我认为，[angular2]加载时间。人们遇到的主要问题是编译时和加载大量文件，因此有一个规范的答案来指出这一点是很好的。我感谢你的更新。