使用 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 秒左右的页面空白?。好在是个单页应用,就这一下子慢后面的交互都还蛮顺畅。所有东西都集中在这一个脚本里,花这么久也是能理解的。这表现目前是够我用了,希望以后能有更好的解决办法吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏飞雪无情的博客

Android 源码目录结构详解

这是Android2.1的源代码的目录结构,可以帮助我们研究Android的源代码。Android源代码的下载请参考官网

1702
来自专栏程序你好

安卓开发中的Model-View-Presenter(MVP模式)

在软件开发行业中找到一个Android开发的架构标准是相当复杂的。确实,在一段时间内,一个非常基础的MVP已经被提出来打破 God-Object (完全负责所有...

1173
来自专栏BIT泽清

这十个步骤让你的 App 避规ios 4.3被拒问题,亲测顺利过审

ios开发子了解到,最近有大批开发者遇到了因为审核条款 4.3(后文统一简称 4.3)被 App Store 拒绝的情况。这种情况常见于大家上传CP,金融理财类...

1K7
来自专栏FreeBuf

“同形异义字”钓鱼攻击,钉钉中招

技术交流:allen.lan#hotmail.com(# > @) 同形异义字钓鱼攻击号称“几乎无法检测”,是最狡猾的钓鱼攻击!这种攻击产生的原因是国际化域名...

3087
来自专栏嵌入式程序猿

赶快来更新你的bootloader吧

不知大家是否还记得在之前给大家介绍过NXP的kinetis bootloader1.2版本的, 嵌入式工程师必须会的技能:玩转bootloader 时隔一年多,...

3859
来自专栏MoeLove

高效 Bash 使用技巧

我们在日常使用中,难免会使用到一些历史命令或者有时需要对历史命令进行更正,那么如何更加高效的来完成这些操作呢?

952
来自专栏CDA数据分析师

Python程序员都会喜欢的6个库,拿走不谢!

在编程时,小挫折可能与大难题一样令人痛苦。没人希望在费劲心思之后,只是做到弹出消息窗口或是快速写入数据库。因此,程序员都会喜欢那些能够快速处理这些问题,同时长远...

2145
来自专栏Java学习网

网页打开时都发生了什么?我被吓着了

  在浏览器里输入网址或者点击链接,网页打开了……这是我们上网时再普通不过的一幕,但是如此简单的表象背后,却隐藏着无比复杂的技术流程。想涨涨知识吗?往下看吧。 ...

3746
来自专栏Android开发实战

腾讯最热门30款开源项目

开源是个好东西,马化腾除了王者荣耀还是干了些好事情的。腾讯最近开源的一些比较热门的项目,可以学习了解下哈

9313
来自专栏美团技术团队

美团点评前端无痕埋点实践

构建一个数据平台,大体上包括数据采集、数据上报、数据存储、数据计算以及数据可视化展示等几个重要的环节。其中,数据采集与上报是整个流程中重要的一环,只有确保前端数...

1K6

扫码关注云+社区

领取腾讯云代金券