关于使用Angular 2 对页面大小,带宽 以及首次加载速度的影响

背景

随着前端开发愈来愈受到重视，不少的前端框架不断出现。

这些框架极大的增长了前端的功能，丰富和简化了不少前端操做。

然而关于这些框架对页面自己大小，以及网络带宽的影响， 对首次加载速度的冲击是网站开发须要考虑的一个重要因素。

测试分析

 下面以Angular 2官方例子作一个具体分析。

• Heroes例子程序的总体大小约90MB，见下图：

• 须要本身建立的代码自己大小：

可见大部分容量都被插件包占据了。而这些包都比较大，仅以Angular 2自己为例。

• Angular 2 自己包大小如图:

 

若是没有通过任何处理，初始页面加载Framework很容易就超过几兆。

以Angular CLI 新建的空项目为例，项目只有这一个很是简单的页面,惟一功能就是显示一行提示

• 运行界面

Angular CLI 集成了Web pack等工具，会对代码自动打包，这就很大程度下降了页面加载的js/css文件的大小。即便如此，页面也会比较大.

• 简单的打包, 约3.2MB

 为此打包工具支持针对生产环境的打包，能够经过最小化和紧凑代码来进一步下降文件大小。

• 生产环境打包，通过最小化处理约0.5MB

至此整个页面大小已经大幅减少。但仍然比较大。经过服务器的压缩，能够最后一次减小其大小。

•  压缩传输的大小，约104KB.

104KB 能够说是至关小了。咱们接下来进一步分析。

页面的大小显然对带宽有直接的依赖和影响。 若是使用手机访问，即便网速愈来愈快，一个页面几兆甚至十几兆，还是几乎没法接受的。

对于开发一个网站，使用Angular 2等Framework是否带来足够的好处，应该考虑如下方面

1. 用户访问页面的频度，用户完成一次活动/交易 要访问多少内容，有多少交互。
2. 用户的访问是否有带宽限制，是否使用手机流量
3. 首次加载速度的影响有多大

若是你的程序用户/数据交互很简单，页面较少，或者用户一次活动须要处理的内容不多，能够考虑使用静态页面等技术，这会提升访问的速度和稳定性。

反之若是用户要较长时间在页面上进行操做，业务比较复杂，则使用Framework会有很大的好处。

1. 首次加载的内容通过屡次处理已经压缩到很小， 相比如今一个图片都几百KB,framework自己已经能够忽略。
2. 一旦加载完成，后续交互几乎没有多少流量消耗。
3. 极大的减小后续代码的开发难度。

 

总结

随着网络愈来愈快，使用Angular 2等框架作前端开发已经对网站速度没有什么明显的影响， 包括首次加载。

Angular 2和相关的工具提供了按需加载的模式，保证了单页应用的性能。

单页应用已经足够知足大部分项目的需求。