乐趣区

关于javascript:VuePress-博客优化之开启-Gzip-压缩

jiezi

前言

在《一篇带你用 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 官网文档里的解释：

  1. gzip：是否开启 gzip 模块 on 示意开启 off 示意敞开，默认是 off
  2. gzip_min_length：设置压缩的最小文件大小，小于该设置值的文件将不会压缩
  3. gzip_comp_level：压缩级别，从 1 到 9，默认 1，数字越大压缩成果越好，但也会越占用 CPU 工夫，这里选了一个常见的折中值
  4. 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、集体服务器等平台。

  1. 一篇带你用 VuePress + GitHub Pages 搭建博客
  2. 一篇教你代码同步 GitHub 和 Gitee
  3. 还不会用 GitHub Actions？看看这篇
  4. Gitee 如何主动部署 Pages？还是用 GitHub Actions!
  5. 一份前端够用的 Linux 命令
  6. 一份简略够用的 Nginx Location 配置解说
  7. 一篇从购买服务器到部署博客代码的具体教程
  8. 一篇域名从购买到备案到解析的具体教程
  9. VuePress 博客优化之 last updated 最初更新工夫如何设置
  10. VuePress 博客优化之增加数据统计性能
  11. VuePress 博客优化之开启 HTTPS

微信：「mqyqingfeng」，加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者 有所启发，欢送 star，对作者也是一种激励。

退出移动版