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

Question

我正在使用AngularJS 2开发2个应用程序。我选择了angular2，因为它速度快，并且与angular1相比还有许多其他优点。但我面临的问题是应用程序的初始加载速度。它加载了大量与RxJs相关的大量javascript文件。有没有办法优化它？

Answer 1

在开发过程中，这是非常常见的，因为您已经注意到，有很多文件需要加载，这占用了大部分加载时间。要使应用程序的分布式版本加载速度更快，您可以通过两种方式实现目标：

选项1：使用捆绑器

如果正确捆绑文件，通常应该使用一个或两个js文件，这些文件通常执行速度非常快。一个包含所有外部库的文件，如angular2，RxJs，lodash等，以及一个包含您的应用程序的文件（或者您可以将所有内容都放在一个文件中）。 像webpack或SystemJS这样的捆绑包通常也只打包应用程序所需的库的那些部分。因此，对于RxJs，大多数部分都可能被忽略，我的猜测是你的应用程序只需要所有可用RxJs组件的4-5个组件。

要开始捆绑您的应用，您可能需要查看其中一个捆绑包：

• Webpack：https://webpack.github.io/
• SystemJS：https://github.com/systemjs/systemjs
• JSPM：http://jspm.io/
• 或在此处查看此比较：http://survivejs.com/webpack_react/webpack_compared/

每个捆绑包都有它的＆＃39;优点和缺点主要取决于您的应用程序的需求以及您最适合的方式。

我个人非常满意webpack，它涵盖了大多数情况，并且相当很容易让基本配置正常运行。

选项2：使用种子项目或生成器

如果您不想设置自己的捆绑包，则可以随时使用配置捆绑包附带的种子样板来启动项目。 仅举几例：

• SystemJS：https://github.com/mgechev/angular2-seed/
• Webpack：https://github.com/AngularClass/angular2-webpack-starter
• Gulp：https://github.com/x6doooo/generator-gulp-angular2#readme

此选项基本上利用了Option1，但您无需进行bundler-setup /配置。如果你是这个问题的新手，并且已经开始讨论所有新的angular2-和rxjs概念，那么这将非常有用。然而，为了真正了解从开始到完成的事情以及所有这些伟大的工具，我建议你至少配置一次捆绑包。

增加：AOT（提前）编译

如果您已将所有资源捆绑到一个软件包中，并且仍然遇到初始延迟，直到应用程序出现，您可以将AOT-Compiling集成到构建周期中（https://angular.io/docs/ts/latest/cookbook/aot-compiler.html）

以下是一系列好处（取自上面链接的Angular2 Cookbook）

  

更快的渲染

     

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

     

更少的异步请求

     

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

     

较小的Angular框架下载大小

     

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

     

提前检测模板错误

     

AoT编译器检测并报告模板绑定错误   用户可以看到它们之前的构建步骤。

     

更好的安全性

     

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

增加＃2：Angular2的服务器端渲染 - ＆＃34; Universal＆＃34;

作为附加选项，您可以实现服务器以在服务器上预渲染angular2应用程序，以便立即显示内容。 有关更多信息，请查看：https://universal.angular.io/

这是一个骨架项目，它实现（可选）AOT编译，以及通用（服务器端渲染）：https://github.com/qdouble/angular-webpack2-starter/