进一步优化SPA的首屏打开速度（模块化与懒加载） by 嗡

前言

单页应用的好处在于一次载入所有页面资源，利用本地计算能力渲染页面，提高页面切换速度与用户体验。但缺点在于所有页面资源将被一次性下载完，此时封装出来的静态资源包体积较大，使得第一次打开SPA页面时候需要的载入时间较长。

在上一篇文章Angular2 单页应用一些优化总结 中提到的利用压缩、混淆、开启gzip传输后，我们成功将3.5兆的资源包压缩到350k。但是如果SPA应用的页面数进一步增加，100个甚至1000个页面的时候，还是无法避免巨大的首页资源包加载的问题。所以350k的资源包是否还有进一步优化的空间呢？答案是肯定的！

从SPA的特性可以看出，用户在第一次打开页面时，实际上是把整个网站的所有页面都一起下载下来了，但是很多情况下，用户可能并不会访问到所有页面，或者短时间内仅在1~2个页面之间跳转。所以如果可以在第一次仅下载一部分页面，然后在用户需要的时候继续下载其它页面资源的话，就能进一步压缩首页资源包的体积。以下对优化步骤进行讲解。

模块化

模块化的好处

模块化是后期优化的首要步骤，默认的Angular2 spa的项目结构为：应用主程序（main.ts）、根模块（app.module.ts）、根组件（app.component），然后才是其它的组件components。其实说白了就是一个拥有好多组件的单模块应用而已。

通过模块化划分，我们可以将应用按照不同功能或者作用划分为不同模块，这样也使得应用结构更加清晰。比如电商类应用：产品模块、订单模块、用户模块