如何阻止react-scripts build压缩TurnstoneSearch相关代码？

核心思路 #

不用关闭全局代码压缩，只针对TurnstoneSearch相关代码跳过Terser的压缩混淆，保留其他代码的生产环境优化。因为Create React App（CRA）默认用TerserPlugin处理代码压缩，所以重点是修改这个插件的排除规则。

具体实现（优先采用不eject的方案） #

1. 用react-app-rewired修改Webpack配置 #

CRA默认隐藏Webpack配置，直接执行eject会失去官方更新支持，所以用react-app-rewired来覆盖配置：

• 安装依赖：

  npm install react-app-rewired customize-cra --save-dev
  

• 在项目根目录新建config-overrides.js文件，写入以下内容：

  const { override, addWebpackPlugin } = require('customize-cra');
  const TerserPlugin = require('terser-webpack-plugin');
  
  module.exports = override(
    addWebpackPlugin(
      new TerserPlugin({
        exclude: /turnstone-search/, // 匹配TurnstoneSearch相关代码文件
        terserOptions: {
          compress: {
            drop_console: false, // 可选，保留控制台输出方便调试
          },
        },
      })
    )
  );
  

• 修改package.json中的scripts命令，把原有的react-scripts替换为react-app-rewired：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

2. 精准匹配排除文件（如果通用规则不够精确） #

如果/turnstone-search/的匹配范围过宽或过窄，可以指定插件的具体文件路径：
修改config-overrides.js中的exclude规则：

exclude: [/node_modules\/turnstone-search\/dist\/.+\.js$/],

这样只会跳过turnstone-search包下dist目录的所有js文件。

3. 备选方案：eject后直接修改Webpack配置（不推荐） #

如果必须执行eject，先运行npm run eject，然后找到config/webpack.config.prod.js中的TerserPlugin配置，添加exclude规则：

new TerserPlugin({
  // 保留原有配置，新增以下一行
  exclude: /turnstone-search/,
}),

注意：eject后无法回退，后续CRA的版本更新需要手动同步配置。

验证方法 #

执行npm run build后，查看build目录下的静态文件，检查TurnstoneSearch相关代码是否未被混淆（比如变量名保留原样），然后用serve -s build启动生产环境应用，测试搜索栏功能是否恢复正常。

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