共计 2246 个字符,预计需要花费 6 分钟才能阅读完成。
前言
在《一篇带你用 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 的配置,就能够间接开启。
# 登陆服务器
ssh -v root@8.147.xxx.xxx
# 进入 Nginx 目录
cd /etc/nginx
# 批改 Nginx 配置
vim nginx.conf
在 server 中增加 Gzip 压缩相干配置:
server {
listen 443 ssl;
server_name ts.yayujs.com;
ssl_certificate cert/6982037_ts.yayujs.com.pem;
ssl_certificate_key cert/6982037_ts.yayujs.com.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
location ^~ /learn-typescript/ {alias /home/www/website/ts/;}
location / {
alias /home/www/website/ts/;
index index.html;
}
# 这里是新增的 gzip 配置
gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/xhtml+xml application/xml font/eot font/otf font/ttf image/svg+xml text/css text/javascript text/plain text/xml;
}
这里简要介绍一下波及到的配置项含意,更具体的能够查看 Nginx 官网文档里的解释:
- gzip:是否开启 gzip 模块 on 示意开启 off 示意敞开,默认是 off
- gzip_min_length:设置压缩的最小文件大小,小于该设置值的文件将不会压缩
- gzip_comp_level:压缩级别,从 1 到 9,默认 1,数字越大压缩成果越好,但也会越占用 CPU 工夫,这里选了一个常见的折中值
- gzip_types:进行压缩的文件类型
批改完后,不要遗记从新加载一次 Nginx 配置:
systemctl reload nginx
验证
第一种形式是间接查看网络申请,关上浏览器的调试工具,查看 Network
申请,如果申请响应头的 Content-Encoding
字段为 gzip
,就示意胜利开启了 Gzip:
第二种形式是通过站长工具验证,关上网页 GZIP 压缩检测,输出网站,进行查问:
成果
咱们以「根底」章节页面为例,这是开启 Gzip 压缩前的截图:
咱们能够看到传输大小为 2.2M,用时 14.53s。
这是开启 Gzip 压缩后的截图:
咱们能够看到传输大小为 526 K,用时 1.27s,能够看到资源大小、加载速度都失去了大幅的晋升。
系列文章
博客搭建系列是我至今写的惟一一个偏实战的系列教程,解说如何应用 VuePress 搭建博客,并部署到 GitHub、Gitee、集体服务器等平台。
- 一篇带你用 VuePress + GitHub Pages 搭建博客
- 一篇教你代码同步 GitHub 和 Gitee
- 还不会用 GitHub Actions?看看这篇
- Gitee 如何主动部署 Pages?还是用 GitHub Actions!
- 一份前端够用的 Linux 命令
- 一份简略够用的 Nginx Location 配置解说
- 一篇从购买服务器到部署博客代码的具体教程
- 一篇域名从购买到备案到解析的具体教程
- VuePress 博客优化之 last updated 最初更新工夫如何设置
- VuePress 博客优化之增加数据统计性能
- VuePress 博客优化之开启 HTTPS
微信:「mqyqingfeng」,加我进冴羽惟一的读者群。
如果有谬误或者不谨严的中央,请务必给予斧正,非常感激。如果喜爱或者 有所启发,欢送 star,对作者也是一种激励。