我的 Angular 2 应用程序第一次加载非常缓慢

Question

为什么我的 Angular 应用第一次加载这么慢？ 是什么导致 compiler.umd.js 在加载其他文件之前需要将近 5 秒的时间？

Answer 1

我认为您没有使用任何捆绑工具，例如 webpack、systemjs..

当您部署 ng2-app 时，我应该使用 AOT（提前）编译。 我猜你正在使用 JIT（及时）编译。

在angular2指南页面中，

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

当您使用 JIT 编译时，您的浏览器会下载 vendor.js，它是定义 angular2 编译器的，它会及时编译您的应用程序。太慢了。

我建议在部署时使用 AOT 编译，并使用延迟加载来调整资源大小。

如果您对 ng2 AOT 编译感兴趣，请阅读本指南。

angualar2-cookbook-AOT

这里是带有 webpack2 和延迟加载的示例 angular2 应用程序。

与 aot 捆绑的文件小于 500KB。

angular2-webpack2-aot