vite如何生成gzip,并在服务器上如何设置开启

1. 安装插件
复制代码
npm install vite-plugin-compression -D
2. 在 vite.config.ts 中配置

TypeScript

复制代码
import { defineConfig } from 'vite'
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 1024, // 小于 1KB 的文件不压缩
    })
  ]
})

一、Nginx(Linux 最常见)

复制代码
# 1. 确认已开启 gzip 静态模块(绝大多数发行版默认已编译)
nginx -V 2>&1 | grep -o with-http_gzip_static_module
# 如果输出中有 with-http_gzip_static_module 就说明支持

# 2. nginx.conf 或站点配置
server {
    listen 80;
    server_name  your-domain.com;
    root /var/www/dist;   # 指向 vite build 出来的 dist 目录

    # 优先使用现成的 .gz
    gzip_static  on;      # 关键!
    # 动态压缩作为兜底(可关掉,因为我们已经有 .gz)
    gzip        off;

    # 其余静态资源
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态文件缓存期
    location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

# 3. 重载配置
sudo nginx -t && sudo systemctl reload nginx

浏览器访问后,在 DevTools → Network → 某 xxx.js → Response Headers 里能看到

Content-Encoding: gzip

说明 .gz 文件被直接命中。

相关推荐
Wang's Blog4 分钟前
Linux小课堂: NGINX反向代理服务器配置与实践
linux·运维·nginx
zhilin_tang13 分钟前
对比select和epoll两种多路复用机制
linux·c语言·架构
showker31 分钟前
ecstore等产品开启缓存-后台及前台不能登录原因-setcookie+session问题
java·linux·前端
运维行者_36 分钟前
运维实战:SSL 证书故障避坑指南(精简版)
运维·网络协议·ssl
AI扶我青云志43 分钟前
AGENT 和自动化工作流的区別
运维·自动化
victory04311 小时前
progen2 docker镜像打包命令文档
运维·docker·容器
初学者_xuan1 小时前
零基础新手小白快速了解掌握服务集群与自动化运维(十五)Redis模块-哨兵集群
运维·redis·自动化
conkl1 小时前
在 CentOS 系统上实现定时执行 Python 邮件发送任务完整指南
linux·运维·开发语言·python·centos·mail·邮箱
江輕木1 小时前
VMware安装配置CentOS 7
linux·运维·centos
wydaicls1 小时前
了解一下kernel6.12中cpu_util_cfs_boost函数的逻辑
linux·开发语言