前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用 gzip 以及 cdn 加快前端载入速度

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

作者头像
Alan Zhang
发布2018-10-19 14:53:04
3.4K0
发布2018-10-19 14:53:04
举报
文章被收录于专栏:Alan's Lab

参考资料

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 参考资料
  • 正文
    • 使用 gzip 减少流量传输
      • 使用 CDN 加速网站访问
        • 收工
        相关产品与服务
        内容分发网络 CDN
        内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档