Webpack 通过 compression-webpack-plugin 插件预生成 .gz 文件实现静态压缩，需配置 test、threshold、minRatio 和 deleteOriginalAssets: false，并配合 Nginx gzip_static on 使用。
Webpack 本身不直接压缩资源，而是通过 compression-webpack-plugin 插件，在构建时生成 .gz 文件。它不会动态压缩，而是预生成静态压缩包，配合 Nginx 的 gzip_static on 使用，效果更稳定、性能开销更低。
安装并引入插件
在生产环境配置中添加插件：
- 安装插件：
npm install compression-webpack-plugin --save-dev - 在
vue.config.js、webpack.config.js或webpack.prod.conf.js中引入并配置
基础配置示例（支持 JS/CSS/HTML）
以 vue.config.js 为例：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionWebpackPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: /\.(js|css|html|txt|xml|json)$/,
threshold: 10240, // ≥10KB 才压缩
minRatio: 0.8, // 压缩后体积必须比原文件小 20% 以上才保留 .gz
deleteOriginalAssets: false // 不删除原始文件（必须为 false，.gz 和原文件需共存）
})
]
}
}
}
}
关键配置说明
-
test：匹配需要压缩的文件类型，常见为
js、css，也可加html（注意 HTML 文件通常较小，压缩收益低） - threshold：单位字节，太小的文件压缩反而可能变大，10KB 是较稳妥的起点
- minRatio：避免“越压越大”，例如原文件 12KB，压缩后 11KB（压缩率仅 92%），低于 0.8 就不生成 .gz
-
deleteOriginalAssets: false：这是重点！Nginx 需要同时看到
app.js和app.js.gz，才能按需返回压缩版本
验证是否生效
执行 npm run build 后，检查 dist 目录下是否有对应 .gz 文件，例如：
立即学习“Java免费学习笔记（深入）”；
-
static/js/app.abc123.js→ 同时存在 →static/js/app.abc123.js.gz -
index.html→ 同时存在 →index.html.gz（若配置了 html 匹配）
没有 .gz 文件，说明插件未运行或 test 正则未匹配到目标文件。
