React项目构建后JS与CSS未压缩，求助解决方法

AI 小北

2026-7-24

解决方案

1. 确认环境变量正确生效

确保.env文件放在项目根目录，变量严格写成GENERATE_SOURCEMAP=false（全大写，无多余空格）
修改.env后必须重新执行npm run build，旧的构建产物不会自动同步配置变更
构建时留意控制台日志，出现Sourcemap is disabled.提示即说明变量已生效

2. 先检查本地构建产物状态

打开项目根目录下的build/static/js和build/static/css文件夹：
- 正常压缩后的文件应该无缩进、文件名带哈希（如main.abc123.js）、体积远小于开发环境文件
- 如果本地文件已经是压缩状态，说明问题出在Chrome DevTools的显示设置上

3. 调整Chrome DevTools显示配置

在Sources面板右上角，找到格式化代码按钮（{}图标），如果处于激活状态则点击关闭，即可查看原始压缩文件
进入DevTools设置（按F1键或右上角三个点→Settings），在Sources分类下取消勾选Enable JavaScript source maps和Enable CSS source maps选项

4. 自定义webpack配置强制压缩（针对ejected/使用rewire的项目）

如果是已ejected的项目或使用react-app-rewired，可直接修改webpack配置确保压缩生效：

编辑webpack.config.js，找到optimization配置块并修改为：

optimization: {
  minimize: true,
  minimizer: [
    new require('terser-webpack-plugin')({
      terserOptions: {
        compress: true,
        mangle: true,
        format: {
          comments: false
        }
      }
    }),
    new require('css-minimizer-webpack-plugin')()
  ]
}