React项目构建后如何压缩.js、.css文件？postbuild脚本报错如何解决

报错原因 #

你遇到的报错主要来自两个常见问题：

• react-scripts默认构建的产物结构中，static目录下不会直接存放js、css文件，所有js资源放在static/js/子目录，css资源放在static/css/子目录，你原来的脚本直接在static目录匹配*.js、*.css会因为找不到目标文件抛出错误
• 如果你在Windows系统原生命令行（cmd/PowerShell）执行脚本，系统默认没有内置gzip命令，也会触发命令不存在的报错

修复方案 #

方案1：直接修改原生脚本（适合Mac/Linux环境） #

调整postbuild的路径匹配规则，直接指定子目录资源，不需要切换目录：

"postbuild": "gzip build/static/js/*.js build/static/css/*.css"

方案2：使用跨平台工具（兼容Windows/Mac/Linux，更稳定） #

用npm包gzip-all实现跨平台的递归压缩，避免环境差异问题：

1. 先安装依赖：

npm install gzip-all --save-dev

2. 修改postbuild脚本：

"postbuild": "gzip-all \"build/static/**/*.{js,css}\""

该配置会自动递归匹配static目录下所有js、css文件，不需要手动指定子目录。

方案3：构建阶段直接生成（无需postbuild脚本） #

如果你希望在webpack构建阶段直接生成gzip资源，不需要额外执行postbuild脚本，可以通过react-app-rewired + compression-webpack-plugin实现：

1. 安装依赖：

npm install react-app-rewired compression-webpack-plugin --save-dev

2. 项目根目录新建config-overrides.js，写入以下配置：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = function override(config) {
  config.plugins.push(
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css)$/,
      threshold: 8192,
      minRatio: 0.8
    })
  );
  return config;
}

3. 修改package.json中的build脚本：

"build": "npm run watch:css && react-app-rewired build"

后续配置注意 #

生成gz文件后，需要额外配置你的静态资源服务器（Nginx/Caddy等）开启gzip_static功能，服务器才会优先返回你提前压缩好的gz文件，避免实时压缩的性能消耗。

内容的提问来源于stack exchange，提问作者r121