Angular 首屏加载优化

Angular 应用主要包含组件和它们的HTML模板。 在浏览器可以渲染应用之前，组件和模板必须要被Angular编译器转换为可以执行的JavaScript。最简单的方式就是将所有代码加载到浏览器中，包括我们自己写的组件的 Angular 编译器，然后在浏览器中编译，这种编译方式就是 JIT(Just-in-Time).

JIT 编译与比较大的性能问题。由于需要在浏览器中执行这个编译过程，因此视图需要花更长时间才能渲染出来。而且编译所需要的 Angular 编译器和许多应用并不需要的库也会发送到浏览器，这导致应用体积变大，浏览器加载速度也变慢。

---

AOT 编译

AOT(Ahead of Time) 编译方式会首先在本地将应用编译完成，因此可以节省在浏览器上的首次编译时间，而且编译完后的应用不再需要 Angular 编译器了，因此体积也大大缩小了。

使用 AOT 编译可以在 官方文档 看到。

当然最简单的方式是使用 angular-cli

下面看两种编译方式的体积大小以及应用加载速度

首先是体积大小，下面主要观察 vendor.bundle.js 文件的大小，该文件中打包了应用所依赖的 node_module 中的库。

JIT 模式下 vendor.bundle.js 的体积为 3.2M

js加载时间大概为 1.1s