JavaScript 中 Vite 怎么配置 gzip 压缩静态资源-js教程-PHP中文网

vite 项目配置 gzip 压缩需使用 vite-plugin-compression 插件生成 .gz 文件，并配合服务端启用 gzip_static 或 compression 中间件返回压缩资源。

javascript 中 vite 怎么配置 gzip 压缩静态资源

在 Vite 项目中配置 gzip 压缩，核心是使用 vite-plugin-compression 插件，在构建时为 JS、CSS、HTML 等文本类资源生成 .gz 文件。它不改变原始文件，只额外生成压缩副本，真正生效还需服务端配合识别并返回 .gz 文件。

安装插件

推荐使用 pnpm（Vite 官方推荐）：

pnpm add -D vite-plugin-compression

若用 npm 或 yarn，对应替换为 npm install vite-plugin-compression --save-dev 或 yarn add vite-plugin-compression -D。

在 vite.config.ts/js 中启用

导入并加入 plugins 数组，基础配置示例如下：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

algorithm: 'gzip' —— 指定压缩算法（也支持 'brotli'，压缩率更高但兼容性略低）
ext: '.gz' —— 生成的压缩文件后缀
threshold: 10240 —— 只压缩大于 10KB 的文件（太小的文件压缩收益低，甚至可能变大）
deleteOriginFile: false —— 不删除原始文件（必须为 false，否则线上会 404）
verbose: true —— 构建时打印压缩详情，便于验证是否生效

完整代码片段：

import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240,
      deleteOriginFile: false,
      verbose: true
    })
  ]
})

服务端必须开启 gzip_static 支持

仅前端打包出 .gz 文件还不够。浏览器请求 index.js 时，服务器需主动返回 index.js.gz 并设置 Content-Encoding: gzip。常见配置：

Nginx：在 http 或 server 块中添加
gzip_static on;
gzip_vary on;（关键！否则浏览器可能忽略 .gz）
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
Express + serve-static：需搭配 compression 中间件，并确保静态托管支持 serve-static 的 index 和 extensions 选项识别 .gz

验证是否成功

执行 pnpm build 后检查 dist 目录：应看到如 assets/index.xxxx.js 和 assets/index.xxxx.js.gz 成对存在；部署后打开 Chrome DevTools → Network 标签页，刷新页面，筛选 JS/CSS 请求，查看响应头是否有 Content-Encoding: gzip，且 Size 列显示 “transferred” 明显小于 “resource”。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南