nginx gzip 动态静态压缩详解

目录
  • 前言
    • 动态压缩
    • 静态压缩
    • 动静结合

前言

gzip压缩是解决编译产物体积过大、缩短静态资源请求时长的常用手段之一,我们在网站上经常能看到 Content-Encoding: gzip 这个 http 响应头,表示内容使用 gzip 压缩;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会自动寻找.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

如图

文档参考:

http://nginx.org/en/docs/http/ngx_http_gzip_static_module.html

http://nginx.org/en/docs/http/ngx_http_gzip_module.html

以上就是nginx gzip 动态静态压缩详解的详细内容,更多关于nginx gzip动静态压缩的资料请关注我们其它相关文章!

(0)

相关推荐

  • nginx sticky实现基于cookie负载均衡示例详解

    目录 前言 思考 1.cookie_jsessionid 负载均衡 1.1 后端准备 1.2 hash $cookie_jsessionid;配置 2.nginx sticky 负载均衡 2.1 下载 sticky 2.2 重新编译升级nginx 2.3 upstream 配置 sticky 2.4 修改后端不再创建session 2.5 再次 多次请求 3.sticky 其他用法 总结 前言 sticky 是一个nginx的第三方模块 它不在nginx发行版中 需要额外编译这个模块的, 它的思

  • Nginx限制带宽配置示例

    示例一: 复制代码 代码如下: http {    limit_rate 25k;                              #每个连接的速度限制    limit_zone to_vhost $server_name 1m;         #每个域名的总带宽限制    limit_conn to_vhost 30;                      #每个连接可以开多少个线程 } 示例二: 用Nginx做下载服务的时候,可能会做下载速度限制,这个Nginx可以做到:

  • nginx如何指向本地路径及500错误解决方法

    正文 一个vite+vue3项目,想要部署到服务器上.项目build后的文件都在dist目录下,将这个目录拷贝到服务器上,然后在nginx里进行配置,如下: server { listen 3571; server_name localhost; location / { root /root/xxxx/dist/; try_files $uri $uri/ /index.html; } } 这样就可以通过服务器的公网ip+端口3571来访问这个vue项目了,如果想通过域名访问,则可以这样配置:

  • nginx并发数限制limit_conn基本语法

    目录 基本语法 实验 nginx配置 使用jmeter测试 安装Jmeter 新建 Thread Group 新建 HTTP Request 添加 View Results in Table 执行并发请求 总结 基本语法 当服务器面临高并发访问时,若连接数没有得到恰当的控制,则服务器的性能将受到影响,甚至可能导致崩溃.Nginx 的 limit_conn 指令是一个非常重要的服务器安全设置,可用于限制和控制并发连接数量. limit_conn 指令的基本语法为: limit_conn connl

  • 详解使用ChatGPT解决Nginx反向代理的问题

    目录 背景 使用ChatGPT解决 总结 背景 我有 3 台服务器,1台Web服务器对外提供访问,另外两台服务器 QC1 和 QC2 用于存储不同设备识别后保存的照片.它们的 IP 地址如下: 服务器名称 IP地址 Web服务器 10.76.2.10 QC1 192.168.100.1 QC2 192.168.100.2 前端程序需要根据照片的文件名称把图片显示出来,最开始想到的就是通过 Nginx 进行反向代理来解决这个问题. 举个例子,照片文件名称是 QC1 开头的,那么就是从 192.16

  • Nginx 动态域名解析过程详解

    目录 摘要 基于自定义DNS服务器动态解析 default.conf配置 主要配置点 启动访问 基于K8S的CoreDns动态域名解析 default.conf 主要配置点 摘要 Nginx进行反向代理的时候会进行域名解析,把域名解析为具体IP后缓存在本地,如果域名对应的IP发生了改变,则会导致Nginx代理失效,下面使用Nginx的resolver指令来实现域名动态解析. 基于自定义DNS服务器动态解析 内网DNS服务器我使用的是dnsmasq default.conf配置 server {

  • Linux静态库与动态库实例详解

    Linux静态库与动态库实例详解 1. Linux 下静态链接库编译与使用 首先编写如下代码: // main.c #include "test.h" int main(){ test(); return 0; } // test.h #include<iostream> using namespace std; void test(); // test.c #include "test.h" void test(){ cout<< &quo

  • Spring静态代理和动态代理代码详解

    本节要点: Java静态代理 Jdk动态代理 1 面向对象设计思想遇到的问题 在传统OOP编程里以对象为核心,并通过对象之间的协作来形成一个完整的软件功能,由于对象可以继承,因此我们可以把具有相同功能或相同特征的属性抽象到一个层次分明的类结构体系中.随着软件规范的不断扩大,专业化分工越来越系列,以及OOP应用实践的不断增多,随之也暴露了一些OOP无法很好解决的问题. 现在假设系统中有三段完全相似的代码,这些代码通常会采用"复制"."粘贴"方式来完成,通过这种方式开发

  • C++中静态初始化数组与动态初始化数组详解

    静态初始化的数组的长度必须是在程序中确定的常数,不能是由用户输入的变量 例子: int a[10];//正确 Student stud[10];//正确:Student是一个学生类 int n;cin>>n;int a[n];//错误 int n;cin>>n;Student stud[n];//错误:Student是一个学生类 动态初始化数组可以使用用户输入的变量作为数组的长度. 例子: int n; cin>>n; int *a=new int[n];//这样整数数

  • Spring AOP里的静态代理和动态代理用法详解

    什么是代理? 为某一个对象创建一个代理对象,程序不直接用原本的对象,而是由创建的代理对象来控制原对象,通过代理类这中间一层,能有效控制对委托类对象的直接访问,也可以很好地隐藏和保护委托类对象,同时也为实施不同控制策略预留了空间 什么是静态代理? 由程序创建或特定工具自动生成源代码,在程序运行前,代理类的.class文件就已经存在 通过将目标类与代理类实现同一个接口,让代理类持有真实类对象,然后在代理类方法中调用真实类方法,在调用真实类方法的前后添加我们所需要的功能扩展代码来达到增强的目的. 优点

  • JSP静态导入与动态导入使用详解

    JSP静态导入(JSP指令标记include) JSP页面第一次被请求时,会被JSP引擎转译成Servlet的Java文件,然后再被编译成字节码文件执行.JSP指令标记为JSP页面转译提供整个页面的相关信息. include指令用于在JSP页面静态插入一个文件,被插入的文件可以是JSP页面.HTML页面.文本文件或一段Java代码.使用了include指令的JSP页面在转换成Java文件时,将被插入的文件在当前JSP页面出来该指令的位置做整体的插入,合并成一个新的JSP页面,然后JSP引擎再将这

  • Java静态代理与动态代理案例详解

    代理模式 代理模式(Proxy):为其他对象提供一个代理以控制对这个对象的访问. 主要解决:在直接访问对象时带来的问题,比如说:要访问的对象在远程的机器上.在面向对象系统中,有些对象由于某些原因(比如对象创建开销很大,或者某些操作需要安全控制,或者需要进程外的访问),直接访问会给使用者或者系统结构带来很多麻烦,我们可以在访问此对象时加上一个对此对象的访问层. 代理模式的元素是:共同接口.代理对象.目标对象. 代理模式的行为:由代理对象执行目标对象的方法.由代理对象扩展目标对象的方法. 代理模式的

  • Nginx配置参数中文说明详解(负载均衡与反向代理)

    PS:最近在看<<高性能Linux服务器构建实战>>的Nginx章节,对其nginx介绍的非常详细,现把经常用到的Nginx配置参数中文说明摘录和nginx做负载均衡的本人真实演示实例抄录下来以便以后查看! Nginx配置参数中文详细说明 #定义Nginx运行的用户和用户组 user www www; # #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; # #全局错误日志定义类型,[ debug | info | notice | war

  • Nginx安装与使用教程详解

    前言 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入口网站及搜索引擎Rambler(俄文:Рамблер)使用.其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好.(百度百科- http://www.dwz.cn/x32kG) 1.Nginx安装 我使用的环境是64位 Ubuntu 14.04.ngin

  • JVM 方法调用之静态分派(详解)

    分派(Dispatch)可能是静态也可能是动态的,根据分派依据的宗量数可分为单分派和多分派.这两种分派方式的两两组合就构成了静态单分派,静态多分派,动态单分派,动态多分派这4种组合.本章讲静态分派. 1.静态分派 所有依赖静态类型来定位方法执行版本的分派动作称为静态分派.静态分派的典型应用是方法重载.静态分派发生在编译阶段,因此确定静态分派的动作实际上不是由虚拟机来执行的. 那么什么是静态类型(static type)呢? Super object = new Sub(); 像上面的语句,Sup

随机推荐