前言在《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用VuePress构建了一个博客。在《一篇从购买服务器到部署博客代码的详细教程》中,我们将代码部署到了服务器上。最终效果见:TypeScript中文文档。今天我们将学习如何在服务器上启用Gzip压缩。Gzip压缩关于Gzip压缩,参考MDN的介绍:Gzipisafileformatforfilecompressionanddecompression。它基于Deflate算法,该算法将文件压缩得更小以实现更快的网络传输。Web服务器和现代浏览器普遍支持Gzip,这意味着服务器可以在发送文件前自动用Gzip压缩文件,浏览器在接收文件时可以自行解压文件。对我们来说,开启Gzip不仅可以提高网站打开速度,还可以节省网站流量。比如我买的服务器是按使用流量付费的。打开Gzip是为我自己省钱。Nginx和GzipNginx内置了ngx_http_gzip_module模块,拦截请求并压缩需要Gzip压缩的文件。因为是内部集成的,我们只需要修改Nginx的配置就可以直接打开了。#登录服务器ssh-vroot@8.147.xxx.xxx#进入Nginx目录cd/etc/nginx#修改Nginx配置vimnginx.conf在server中添加Gzip压缩相关配置:server{listen443ssl;服务器名称ts.yayujs。ssl_certificatecert/6982037_ts.yayujs.com.pem;ssl_certificate_keycert/6982037_ts.yayujs.com.key;ssl_session_timeout5m;ssl_ciphersECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HILLIGH:!!NaNULL:!MD5:!ADH:!RC4;ssl_protocolsTLSv1.1TLSv1.2TLSv1.3;ssl_prefer_server_ciphers开启;位置^~/learn-typescript/{别名/home/www/website/ts/;}location/{别名/home/www/website/ts/;索引index.html;}#这里是新的gzip配置gzipon;gzip_min_length1k;gzip_comp_level6;gzip_types应用程序/atom+xml应用程序/geo+json应用程序/javascript应用程序/x-javascript应用程序/json应用程序/ld+json应用程序/清单+json应用程序/rdf+xml应用程序/rss+xml应用程序/xhtml+xml应用程序/xml字体/eot字体/otf字体/ttf图像/svg+xml文本/css文本/javascript文本/纯文本/xml;}这里简单介绍一下涉及到的配置项的含义。更详细的可以参考Nginx官方文档中的解释:gzip:是否启用gzip模块on表示启用,off表示禁用。默认为offgzip_min_length:设置压缩的最小文件大小,小于此设置值的文件将不被压缩gzip_comp_level:压缩级别,从1到9,默认为1,数字越大,压缩效果越好,但是它还将消耗更多的CPU时间。这里选择一个常用的折衷值gzip_types:修改压缩文件类型后,不要忘记重新加载Nginx配置:systemctlreloadnginxverification第一种方式是直接查看网络请求,打开浏览器的调试工具,查看网络请求。如果Content-Encoding字段为gzip,则说明Gzip开启成功:第二种方法通过站长工具验证,在网页打开GZIP压缩检测,进入网站,查询:效果我们以“基础”章节页面为例,即开启压缩前Gzip截图:可以看到传输大小为2.2M,耗时14.53s。这是启用Gzip压缩后的截图:我们可以看到传输大小为526K,耗时1.27s。我们可以看到资源大小和加载速度都得到了很大的提升。系列文章博客搭建系列是我目前为止唯一写的实用系列教程,讲解如何使用VuePress搭建博客并部署到GitHub、Gitee、个人服务器等平台。一会带你用VuePress+GitHubPages搭建博客一会教你如何在GitHub和Gitee之间同步代码还是不知道如何使用GitHubActions?看看这个Gitee是如何自动部署Pages的?仍然使用GitHubActions!一个足够前端的Linux命令一个足够简单的NginxLocation配置说明从购买服务器到部署博客代码的详细教程从域名购买到备案到解析VuePress博客优化的详细教程最后更新如何设置最后VuePress博客优化更新时间添加数据统计功能VuePress博客优化启用HTTPS微信:“mqyqingfeng”,加我到SaeYu的唯一读者群。如有错误或不准确的地方,请务必指正,万分感谢。如果你喜欢或者有启发,欢迎star,这也是对作者的鼓励。
