前言
单页应用的好处在于一次载入所有页面资源,利用本地计算能力渲染页面,提高页面切换速度与用户体验。但缺点在于所有页面资源将被一次性下载完,此时封装出来的静态资源包体积较大,使得第一次打开SPA页面时候需要的载入时间较长。
在上一篇文章Angular2 单页应用一些优化总结 中提到的利用压缩、混淆、开启gzip传输后,我们成功将3.5兆的资源包压缩到350k。但是如果SPA应用的页面数进一步增加,100个甚至1000个页面的时候,还是无法避免巨大的首页资源包加载的问题。所以350k的资源包是否还有进一步优化的空间呢?答案是肯定的!
从SPA的特性可以看出,用户在第一次打开页面时,实际上是把整个网站的所有页面都一起下载下来了,但是很多情况下,用户可能并不会访问到所有页面,或者短时间内仅在1~2个页面之间跳转。所以如果可以在第一次仅下载一部分页面,然后在用户需要的时候继续下载其它页面资源的话,就能进一步压缩首页资源包的体积。以下对优化步骤进行讲解。
模块化
模块化的好处
模块化是后期优化的首要步骤,默认的Angular2 spa的项目结构为:应用主程序(main.ts)、根模块(app.module.ts)、根组件(app.component),然后才是其它的组件components。其实说白了就是一个拥有好多组件的单模块应用而已。
通过模块化划分,我们可以将应用按照不同功能或者作用划分为不同模块,这样也使得应用结构更加清晰。比如电商类应用:产品模块、订单模块、用户模块