关于使用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和相关的工具提供了按需加载的模式，保证了单页应用的性能。

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