在今天的互联网魔法世界中，网站的性能对于用户体验和搜索引擎排名至关重要。Gzip是一种流行的压缩技术，可以显著减少网站传输的数据量，从而提高网站的加载速度。本文将带您一步一步学习如何开启Gzip压缩，让您的网站运行得更快，让访问者更满意。
1.什么是Gzip？
Gzip是一种数据压缩算法，通过将文本、样式表、脚本和其他可压缩的内容压缩成更小的文件，从而减少传输数据量。当浏览器支持Gzip并请求网页时，服务器会将响应的内容进行压缩，并在浏览器端解压缩，实现数据传输的优化。通过开启Gzip压缩，您可以加速网站的加载速度，减少带宽使用，提升用户体验。压缩算法不仅只有Gzip 还有 [‘gzip’，‘brotliCompress’，‘deflate’，‘deflateRaw’] 。
2.开启Gzip压缩
接下来，我们将手把手教您如何在不同类型的Web服务器中开启Gzip压缩。以及前端项目中如何开启Gzip等配置。
2.1 Apache服务器
对于使用Apache服务器的网站，您可以通过修改服务器配置文件来开启Gzip压缩。打开Apache的配置文件（通常是httpd.conf或apache2.conf），然后添加以下代码：
# httpd.conf
# 开启Gzip压缩
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/json
</IfModule>
保存配置文件，并重新启动Apache服务器。现在，您的Apache服务器将在支持Gzip的浏览器中自动开启压缩。
2.2 Nginx服务器
对于使用Nginx服务器的网站，开启Gzip压缩也是相当简单的。打开Nginx的配置文件（通常是nginx.conf），然后添加以下代码：
# nginx.conf
# 开启Gzip压缩
gzip on;
#低于5k的资源不压缩，这个大小可通过自己项目架构来限制
gzip_min_length 5k;
#压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。
gzip_comp_level 4;
#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
gzip_types text/html text/plain text/xml text/css application/javascript application/json;
保存配置文件，依旧是重新启动Nginx服务器。你的Nginx服务器将在支持Gzip的浏览器中自动开启压缩。
2.3 前端工程项目
这里我以vite+Vue工程项目为例，看看如何开启Gzip，我使用的是vite-plugin-compression，安装命令如下：
yarn add vite-plugin-compression -D
or
npm i vite-plugin-compression -D
使用
vite.config.ts 中的配置插件
import viteCompression from 'vite-plugin-compression';
// https://vitejs.dev/config/
export default ({ mode }) => {
return defineConfig({
...
plugins: [
// 启用zip包压缩
viteCompression({
algorithm: 'gzip', // 压缩算法，可选[‘gzip’，‘brotliCompress’，‘deflate’，‘deflateRaw’]
threshold: 5120, // 大于5k启用zip包压缩, 默认是1025
verbose: false, //是否在控制台中输出压缩结果
// deleteOriginFile: true, // 压缩后是否删除源文件, 需要保留源文件，不然会上线后会有下面的一类的错误提示
}),
]
})
};
配置完成后，重新打包上传至服务器。前端工程项目需要前端和服务器同时开启Gzip压缩才会生效。
错误提示：
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
3.测试Gzip压缩
完成了服务器配置的修改后，可以进行测试，确保Gzip压缩已经生效。您可以使用在线的Gzip测试工具或浏览器的开发者工具来检查网页的响应头，确认是否包含了Content-Encoding: gzip的标记。
开启Gzip后
结论
一旦Gzip压缩已经开启，您可以使用各种监控工具来追踪网站性能和Gzip压缩的效果。定期检查并优化网站，确保Gzip压缩一直保持正常运行，并持续提升网站的性能。
开启Gzip压缩是提升网站性能的重要步骤之一。通过减少传输数据量，网站加载速度得到明显提升，访问者的体验也会更加顺畅。本文希望通过手把手教程，让您轻松掌握开启Gzip压缩的方法，让你的项目脱颖而出，吸引更多的用户。
有问题欢迎留言交流～
网友评论