使用 gzip 以及 cdn 加快前端载入速度

参考资料

1. Module ngx_http_gzip_module

正文

还记得在 Angular 2 Component 中使用第三方 JS 库这篇文章里说有个新项目用了 Angular2 么？这篇文章还是跟这个项目有关，为了减少每次访问页面的连接数（访问个首页居然会起 132 个连接！就算是调试时的情况也有点吓人了。。。），我用了 SystemJS builder 将整站打包成了单文件，然后另一个数字又狠狠糊了我一熊脸：这个 app.js 在经过 uglifyjs 压缩之后，容量居然还高达 1.2mb 。。。

使用 gzip 减少流量传输

1.2mb，特别这个项目还是用在微信公众平台上的，手机上加载起来简直是噩梦。本文主题所限，先不考虑从项目本身去优化。为了对付这个情况，我们需要在服务器端开启 gzip 来看看效果，这里以 nginx 为例：

1. sudo vim /etc/nginx/nginx.conf
2. 定位到 Gzip 的配置# Gzip Settings ## gzip on; gzip_disable "msie6"; # gzip_vary on; # gzip_proxied any; # gzip_comp_level 6; # gzip_buffers 16 8k; # gzip_http_version 1.1; # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
3. 想省事的话，把后面的#全去掉就能用了
4. 我这的默认配置里 gzip_types 没有 application/javascript 这一项，如果你那也没有，可能还需要加上才能正常压缩 js 文件 gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript;

好的～万事俱备来看看效果:

实际传输大小 252KB ，压缩到了原来大小的 20% ！这个数据不是一般的鼓舞人心，但事情还没完，压缩工作产生的额外开销可不是免费的。如果给每一个请求单独压缩，我这的土豆服务器使上发芽的劲都撑不住。。。

好在解决方法也简单的很，以 nginx 为例，使用 gzip_static 代替即时压缩即可。但这里我不考虑这个，因为前几天申请的腾讯公众号 CDN 还没用上，免费一年呢，不用白不用～

使用 CDN 加速网站访问

关于 CDN 的原理，可以阅读腾讯云的 CDN缓存那些事 一文了解。简单概括的话，源站就是连锁店的总店，CDN 就是开遍全国各地的分店。总店有的菜色，分店都会复制过去。这样一来顾客就不用不远千里慕名前往总店，而可以就近去楼下的分店一饱口福。

好处大致有两点，一是地理位置上的接近保证顾客的需求能够快速被满足，二是不同地区的各个分店分担了大量的压力，总店只需向分店传授新菜即可。

同时， CDN 还帮我们缓存了前面 gzip 压缩的工作成果。当客户端表示可以处理 gzip 数据的情况下，CDN 就会将缓存下来的压缩过的文件版本发送给客户端，而不需要我们的源站服务器再次进行压缩工作。这就是前面说我们不需要使用 gzip_static 就能够缓存压缩结果的原因。

腾讯 CDN 使用手册传送门：腾讯CDN新手入门

收工

经过上面的工作，可以说加载速度的问题已经得到一定程度上的解决了。但其实还有一个说严重也不算严重的问题：

这个 js 最长的一次需要花上将近 1 秒才算初始化完，这还是在电脑上。实测在手机上的表现就是一切下载完后会有一段 1 秒左右的页面空白?。好在是个单页应用，就这一下子慢后面的交互都还蛮顺畅。所有东西都集中在这一个脚本里，花这么久也是能理解的。这表现目前是够我用了，希望以后能有更好的解决办法吧。