文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

nginx gzip动态压缩和静态压缩怎么配置

2023-07-05 13:22

关注

本文小编为大家详细介绍“nginx gzip动态压缩和静态压缩怎么配置”,内容详细,步骤清晰,细节处理妥当,希望这篇“nginx gzip动态压缩和静态压缩怎么配置”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

动态压缩

动态压缩实际上就是由nginx服务器对编译造物进行压缩,需要在nginx.conf的http、https模块中开启下面的配置:

    gzip  on; # 开启gizo压缩    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; # 文件类型

更改完配置,重启nginx服务器,查看静态资源响应头,出现Content-Encoding: gzip ****则代表开启成功;

nginx gzip动态压缩和静态压缩怎么配置

静态压缩

动态压缩是在服务器上进行的,压缩级别越高越耗性能,静态压缩就是为了解决这个问题而生的,开启静态压缩后,nginx会自动寻找.gz后缀的文件,如果没有则返回源文件;于是乎,我们就可以在前端构建的时候进行gzip压缩;

以vite为例,我们需要引入vite-plugin-compression插件,并且在vite.config.js中按照下面的方式配置;

    import viteCompression from 'vite-plugin-compression'; // gzip    plugins: [ viteCompression() ]

插件支持自定义,主要配置如下

    verbose: true, // 是否在控制台输出压缩结果 这里我们打开查看压缩的效果    disable: false, // 是否禁用    threshold: 10240, // 大于这个值才进行压缩 单位为b    algorithm: 'gzip', // 算法 除了gzip还有 ['brotliCompress' ,'deflate','deflateRaw']    ext: '.gz', // 输出的后缀

引入插件后编译,我们即可看见编译文件中会多出一些.gz结尾的文件,这些便是压缩的产物,查看编译输出,我们可以看到

    dist/D:/code/vue/mine/waylon-blog/packages/waylon-blog-pages/assets/index-d023f1e5.css.gz                                  598.32kb / gzip: 67.81kb

一个598.32kb的css文件经过压缩之后大小变成了67.81kb;

将静态资源部署到服务器上,在nginx.conf中开启下面的配置,nginx会自动去寻找.gz结尾的文件,直接返回给客户端,这就是所谓的静态压缩;

    gzip_static on

坑点!!!

1,nginx对静态压缩的文件要求较高,必须与原文件同时生成,如果不是同时生成的,那么nginx将无法进行匹配(对于这一点,笔者在引入插件后源代码未变更,导致gz文件与原文件时间不一致,导致静态压缩不生效);

官网原话:

The files can be compressed using the gzip command, or any other compatible one. It is recommended that the modification date and time of original and compressed files be the same.

2,nginx默认是没有安装ngx_http_gzip_static_module静态压缩模块的,需手动开启,开启方法这里不赘述,直接上指令:

找到安装路径的configure文件以后,就在这个文件夹下,执行如下命令

./configure  --with-http_gzip_static_module

等待执行完毕以后就是执行make指令

make

动静结合

实际应用中我们通常会采取静态压缩+动态压缩结合的方式来处理我们的静态资源,静态压缩的优先级会高于动态压缩,并不是说压缩的越到小越好,如果已经进行过静态压缩的文件就没有必要再进行动态压缩了,因为这样浪费性能,得不偿失,所以动态压缩的gzip_min_length这个配置尤为重要,能让我们避免一些无谓的操作;

经过上面一系列操作之后,可以用站长工具测试下压缩的效果,直接将静态资源的连接复制进去即可:https://tool.chinaz.com/Gzips/?q=c.nxw.so

如图

nginx gzip动态压缩和静态压缩怎么配置

读到这里,这篇“nginx gzip动态压缩和静态压缩怎么配置”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯