nginx开启gzip
在进行生产环境部署时,开启 Gzip 压缩可以减小静态资源文件的大小,提高网站的加载速度。
动态压缩
动态压缩实际上就是由nginx服务器对编译造物进行压缩,需要在nginx.conf的http、https模块中开启下面的配置:
gzip on; # 开启gizp压缩
gzip_min_length 1k; # gizp压缩起点,文件大于1k才进行压缩
gzip_comp_level 6; # 压缩级别 数字越大压缩得越小 但是越耗性能 根据实际情况而定
gzip_proxied any; # nginx做为反向代理时启用, 详细见官方文档:http://nginx.org/en/docs/http/ngx_http_gzip_module.html#gzip_proxied
gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding
gzip_buffers 16 8k; # 设置压缩所需要的缓冲区大小,以8k为单位,案例中则申请16*4k的缓冲区
gzip_http_version 1.1; # http的版本
gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; # 文件类型
需要注意的是,在部署的服务器上开启 Gzip 压缩功能可能会增加 CPU 的负载,因为服务器需要实时压缩文件并且生成压缩后的版本,但是这个压力对于现代计算机来说通常是可以承受的,在提高传输速度和优化网站性能方面,Gzip 压缩仍然是一种非常有效的技术。
静态压缩
在本地开发环境中,需要使用一些工具来对需要传输的文件构建压缩版本,比如使用 webpack 构建并压缩 JavaScript 脚本,使用 Gulp 压缩 CSS 样式表或者图片等,这样可以在编译阶段对文件进行一次压缩。
在 Vite 的打包配置文件 vite.config.js
中,可以通过设置 vite-plugin-compression
来开启 Gzip 压缩。示例代码如下:
import viteCompression from 'vite-plugin-compression';
export default {
// ...
plugins: [
// 开启 Gzip 压缩
viteCompression({
verbose: true, // 是否在控制台输出压缩结果
disable: false, // 是否禁用
threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
algorithm: 'gzip, // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
ext: '.gz', // 生成的压缩包后缀
deleteOriginFile: false//压缩后是否删除源文件
}),
],
};
在以上配置中,threshold
表示只有在文件大小大于 10240
字节(即 10KB
)时,才会使用 Gzip 压缩进行压缩。如果希望所有文件都开启 Gzip 压缩,可以将该值设为 0。
将静态资源部署到服务器上,在nginx.conf中开启下面的配置,nginx会自动去寻找.gz结尾的文件,直接返回给客户端,这就是所谓的静态压缩;。
gzip_static on;
[root@gz-001 sbin]# ./nginx -s reload
nginx: [emerg] unknown directive "gzip_static" in /opt/nginx/conf/nginx.conf:34
nginx默认是没有安装ngx_http_gzip_static_module
静态压缩模块的,需手动开启,开启方法如下:
找到安装路径的configure文件以后,就在这个文件夹下,执行如下命令
./configure --prefix=/opt/nginx --with-http_gzip_static_module
# make
# make install
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析