VuePress 博客优化之开启 Gzip 压缩
前言
在 《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，在 《一篇从购买服务器到部署博客代码的详细教程》中，我们将代码部署到服务器上，最终的效果查看：TypeScript 中文文档。今天我们来学习如何开启服务器的 Gzip 压缩。
Gzip 压缩
关于 Gzip 压缩，引用 MDN 的介绍：
Gzip 是一种用于文件压缩与解压缩的文件格式。它基于 Deflate 算法，可将文件压缩地更小，从而实现更快的网络传输。 Web 服务器与现代浏览器普遍地支持 Gzip，这意味着服务器可以在发送文件之前自动使用 Gzip 压缩文件，而浏览器可以在接收文件时自行解压缩文件。
而对于我们而言，开启 Gzip，不仅能提高网站打开速度，还能节约网站流量，像我购买的服务器是按照使用流量付费，开启 Gzip 就是在为自己省钱。
Nginx 与 Gzip
Nginx 内置了 ngx_http_gzip_module 模块，该模块会拦截请求，并对需要做 Gzip 压缩的文件做压缩。因为是内部集成，所以我们只用修改 Nginx 的配置，就可以直接开启。
在 server 中添加 Gzip 压缩相关配置：
这里简要介绍一下涉及到的配置项含义，更具体的可以查看 Nginx 官方文档里的解释：
gzip ：是否开启 gzip 模块 on 表示开启 off 表示关闭，默认是 off
gzip_min_length： 设置压缩的最小文件大小，小于该设置值的文件将不会压缩
gzip_comp_level： 压缩级别，从 1 到 9，默认 1，数字越大压缩效果越好，但也会越占用 CPU 时间，这里选了一个常见的折中值
gzip_types：进行压缩的文件类型
修改完后，不要忘记重新加载一次 Nginx 配置：
验证
第一种方式是直接查看网络请求，打开浏览器的调试工具，查看 Network 请求，如果请求响应头的 Content-Encoding 字段为 gzip，就表示成功开启了 Gzip：
第二种方式是通过站长工具验证，打开网页GZIP压缩检测，输入网站，进行查询：
效果
我们以「基础」章节页面为例，这是开启 Gzip 压缩前的截图：
我们可以看到传输大小为 2.2M，用时 14.53s。
这是开启 Gzip 压缩后的截图：
我们可以看到传输大小为 526 K，用时 1.27s，可以看到资源大小、加载速度都得到了大幅的提升。
系列文章
博客搭建系列是我至今写的唯一一个偏实战的系列教程，讲解如何使用 VuePress 搭建博客，并部署到 GitHub、Gitee、个人服务器等平台。
微信：「mqyqingfeng」，加我进冴羽唯一的读者群。
如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者 有所启发，欢迎 star，对作者也是一种鼓励。
版权声明: 本文为 InfoQ 作者【冴羽】的原创文章。
原文链接:【http://xie.infoq.cn/article/29cda682e09576e6850c73edd】。文章转载请联系作者。
还未添加个人签名 2019.01.25 加入
微信公众号 「yayujs」
评论