Nginx实现静态资源压缩的方法详解
1. 概述
1.1 背景
静态资源过大，下载耗时导致页面打开慢，希望通过压缩减小文件大小，提升下载速度。
1.2 压缩方式
Nginx压缩支持两种方式，静态压缩和动态压缩。
● 静态压缩
是先把js、css等文件压缩为.gz文件，客户端访问时会自动下载.gz文件，并在客户端自动解压后访问。
● 动态压缩
客户端发起请求时，nginx动态将js、css文件压缩后返回给客户端，客户端收到后自动解压并访问。
2. 实现
Nginx版本：1.24.0
2.1 静态压缩
我们以Vue3为例子来说明整个实现过程。
2.1.1 压缩Vue3资源文件
● 安装压缩插件
npm install vite-plugin-compression
● 插件配置
vite.config.ts/js 中导入vite-plugin-compression插件和配置
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
export default {
plugins: [
vue(),
// 下面是压缩插件配置
viteCompression({
filter: /\.(js|css|json|txt|ico|svg)(\?.*)?$/i, // 需要压缩的文件
threshold: 1024, // 文件容量大于这个值进行压缩
algorithm: 'gzip', // 压缩方式
ext: 'gz', // 后缀名
deleteOriginFile: true, // 压缩后是否删除压缩源文件，false不删除
})
],
// 其他配置省略
}
注意不要压缩*.html文件，否则访问时会报403错误，即使添加如下配置也会报错：
● 打包
npm run build
输出文件后，部署到nginx的静态资源文件目录：
2.1.2 Nginx配置
● 启用静态压缩功能
在http块或server块增加如下配置则可：
gzip_static on; # 只需要加这一个配置
● 配置静态资源目录
压缩后的文件部署到自定义目录下：
location / {
root /site/static;
index index.html index.htm;
}
2.2 动态压缩
在http块或server块增加如下配置则可：
# 开启动态压缩功能 gzip on; # 压缩级别 gzip_comp_level 6; # 哪些类型的文件需要压缩 gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
3. 验证
3.1 压缩和未压缩性能对比
3.1.1 本机测试
如下是一个压缩和不压缩对比的例子：
可以看到，压缩后的传输数据变小了，但是加载时间并没有减少，说明压缩/解压缩也需要时间，至于哪种方式更快，取决于网络耗时和压缩耗时的具体大小。
3.1.2 公网测试
压缩前：
压缩后：
可以看到在压缩后体积减小，加载时间也变短了。
3.2 识别静态压缩和动态压缩
● 静态压缩
● 动态压缩
4. 总结
● 压缩后未必一定能提升页面打开速度，需要比较网络耗时和压缩耗时时间，哪个更省时。
● 动态压缩会消耗nginx的处理性能，如果能静态压缩，可以优先考虑使用静态压缩。（可以参考自行实测结果）
● 动态压缩和静态压缩可以同时使用，有静态压缩文件就使用，没有则动态压缩。
以上就是Nginx实现静态资源压缩的方法详解的详细内容，更多关于Nginx静态资源压缩的资料请关注脚本之家其它相关文章！
相关文章
在使用nginx代理的过程中,斜线是一个非常重要的符号,因为它涉及到了请求路径的匹配问题,本文主要介绍了Nginx代理中使用斜杠的区别小结,感兴趣的可以了解一下2023-09-09
Nginx 504 Gateway Time-out的两种最新解决方案
大家在访问网站的时候通常会遇到502错误、404错误等,很少会遇到504错误,但是在我们去访问大流量或者内容数据量较多的网站时,打开网页偶尔就会出现504 gateway time-out,这篇文章主要给大家介绍了关于Nginx 504 Gateway Time-out的两种解决方案,需要的朋友可以参考下2022-08-08
Nginx服务器配置HTTPS nginx.config 配置文件(教程)
下面小编就为大家分享一篇Nginx服务器配置HTTPS nginx.config 配置文件(教程)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要给大家介绍了关于利用njs模块在nginx配置中引入js脚本的相关资料,通过这个脚本实现一些更复杂的 nginx 配置功能,需要的朋友可以参考下2021-12-12
本篇文章主要介绍了Ngigx+Tomcat配置动静分离，负载均衡，具有一定的参考价值，有需要的可以了解一下。2016-11-11
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
这篇文章主要介绍了基于nginx实现上游服务器动态自动上下线无需reload,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
这篇文章主要介绍了一文弄懂Nginx的location匹配的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了查看nginx配置是否启用压缩功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-11-11
本文主要介绍了Nginx隐藏server头信息的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
Nginx是一个很强大的高性能Web和反向代理服务,也是一种轻量级的Web服务器,可以作为独立的服务器部署网站,应用非常广泛,特别是现在前后端分离的情况下,这篇文章主要介绍了windows系统下安装Nginx以及简单使用,需要的朋友可以参考下2024-04-04
最新评论