VuePress 博客优化之开启 Gzip 压缩

冴羽 等级 584 0 0
标签:

前言

《一篇带你用 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:

VuePress 博客优化之开启 Gzip 压缩

第二种方式是通过站长工具验证,打开网页GZIP压缩检测,输入网站,进行查询:

VuePress 博客优化之开启 Gzip 压缩

效果

我们以「基础」章节页面为例,这是开启 Gzip 压缩前的截图:

VuePress 博客优化之开启 Gzip 压缩

我们可以看到传输大小为 2.2M,用时 14.53s。

这是开启 Gzip 压缩后的截图:

VuePress 博客优化之开启 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,对作者也是一种鼓励。

收藏
评论区

相关推荐

《前端实战总结》之使用pace.js为你的网站添加加载进度条
前言 最近做网站体验优化的时候突然发现一个好东西,pace.js(加载进度条插件),gzip之后只有几kb, 简单好用,特地分享出来,也作为自己的一个学习总结。
Python使用ThreadingTCPServer创建多线程代理
#coding=utf8 from BaseHTTPServer import BaseHTTPRequestHandler from SocketServer import ThreadingTCPServer import gzip from StringIO import StringIO import
Linux 运维 9月30日 笔记 6.1
目录 一、压缩打包介绍 二、gzip压缩工具 三、bzip2压缩工具 四、xz压缩工具 **一、压缩打包介绍** 1. 常见压缩文件 * Windows .rar .zip. 7z * Linux .zip .gz .bz2 .xz .tar  **二、gzip压缩工具**
mysqldump 全备
\[root@db01 b\]#mysqldump -uroot -poldboy123 -A -R --triggers --master-data=2 --single-transaction | gzip > /b/all\_`date +%F-%H-%M-%S`.sql.gz mysql> create table ttt.nnn(id int p
2021 最顶级 React 组件库推荐
点上方蓝字关注公众号「 `前端从进阶到入院` 」 作者丨Max Rozen 译者丨王强 策划丨小智 Ant Design ![](https://oscimg.oschina.net/oscnet/a85c35f2-3bd0-4e5d-a6a1-e5e68a24119b.png) 项目链接: * Ant Design * h
Hadoop所支持的几种压缩格式
**Gzip压缩** 优点:压缩率比较高,而且压缩/解压速度也比较快;hadoop本身支持,在应用中处理gzip格式的文件就和直接处理文本一样;有hadoop native库;大部分linux系统都自带gzip命令,使用方便。 缺点:不支持split。 应用场景:当每个文件压缩之后在130M以内的(1个块大小内),都可以考虑用gzip压缩格式。譬如说一
Nginx学习笔记——gzip
### 配置详解 gzip on|off 开启或关闭gzip,默认关闭 gzip\_static on|off 对于静态资源预先压缩 gzip\_comp\_level 4 压缩比(1-9),建议4 gzip\_buffers 4 16k 安装原始数据大小以16k为单位的4倍申请内存 (压缩,为什么还要4倍申请,不懂。。。) gzip\_min\_
RestTemplate与Gzip压缩
`Gzip` 是一种压缩算法,服务器经常通过这个算法来压缩响应体,再响应给客户端,从而减少数据体积,提高传输速度。客户端再通过`Gzip`解压缩,获取到原始的数据。因为需要压缩计算,所以会耗费额外的CPU资源。 `Gzip` 与 HttpHeader ------------------- 对于压缩,这个行为来说,客户端与服务器都要经过协商。只有使用了同
VuePress 博客优化之 last updated 最后更新时间如何设置
前言在 中,我们使用 VuePress 搭建了一个博客,但是浏览最终搭建的站点:,我们会发现,在每篇文章的底部,并没有像 VuePress 官方文档那样,出现最后更新的时间:这篇我们来探究下如何实现最后更新时间。 官方自带查阅 VuePress 的,我们可以知道,VuePress 自带显示最后更新时间的插件,在默认主题下,无需安装本插件,因为 VuePre
VuePress 博客优化之添加数据统计功能
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果点击查看:。今天我们给博客添加数据统计功能。 1. 百度统计 1.1 创建站点 1.1.1 登陆站点登陆百度统计后台: 1.1.2 新增网站 在 「管理」 「网站列表」中,点击「新增网站」: 1.1.3 填写信息添加网站域名、网站首页等信息: 1.1.4 获取代码添加完后,会自动跳转到代码获
VuePress 博客优化之开启 HTTPS
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。注意此时,我们的域名还是 ,众所周知,开启 HTTPS 有很多好处,比如可以实现数据加密传输等,那我们如何开启 HTTPS 配置呢? 1. 购买证书阿里云提供了免费证书可以使用,在每个自然年内,都可以通过 SSL 证书服务一次性申领 20 张免费证书。 1.1 购买证书访问,选择 「D
VuePress 博客优化之开启 Gzip 压缩
前言在 中,我们使用 VuePress 搭建了一个博客,在 中,我们将代码部署到服务器上,最终的效果查看:。今天我们来学习如何开启服务器的 Gzip 压缩。 Gzip 压缩关于 Gzip 压缩,引用 MDN 的: Gzip 是一种用于文件压缩与解压缩的文件格式。它基于 Deflate 算法,可将文件压缩地更小,从而实现更快的网络传输。 Web服务器与现代浏览
从零实现一个 VuePress 插件
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。但在搭建 VuePress 博客的过程中,也并不是所有的插件都能满足需求,所以本篇我们以实现一个代码复制插件为例,教大家如何从零实现一个 VuePress 插件。 本地开发开发插件第一个要解决的问题就是如何本地开发,我们查看 VuePress 1.0 官方文档的「」章节,并没有找到解决
VuePress 博客优化之拓展 Markdown 语法
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。如果我们浏览过 TypeScript ,我们会发现一个很好用的功能,那就是很多代码块,在悬浮上去的时候都会出现一个 Try 按钮:点击就会跳转到对应的 Playground,比如图示的按钮跳转的就是,我们可以在这个 Playground 修改并验证代码效果。如果我们要实现这样的功能,该