React生产环境隐藏Source Maps方法（使用Yarn构建）

根据你使用的React项目结构，下面是几种直接可行的操作方法，全部适配Yarn构建场景：

1. 基于Create React App（CRA）的项目 #

这是最常见的React初始化方式，两种简单操作任选其一：

• 修改package.json脚本：找到scripts区块里的build命令，替换为：

  "build": "GENERATE_SOURCEMAP=false react-scripts build"
  

  之后直接运行yarn build，构建产物中不会生成.map后缀的source map文件。
• 使用环境变量文件：在项目根目录新建.env.production文件，写入一行配置：

  GENERATE_SOURCEMAP=false
  

  保存后正常执行yarn build即可，无需修改原有脚本。

2. 基于Vite的项目 #

如果你的仪表盘模板是Vite搭建的，修改根目录的vite.config.js或vite.config.ts：
在build配置项中添加sourcemap: false：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: false // 关闭生产环境source map生成
  }
})

运行yarn build即可生效。

3. 自定义Webpack配置的项目 #

如果项目是手动配置Webpack（比如CRA执行eject后，或模板自带自定义Webpack配置），找到生产环境的Webpack配置文件（通常命名为webpack.config.prod.js），修改devtool选项：

module.exports = {
  // 其他已有配置...
  devtool: false, // 禁用source map生成
}

执行yarn build完成构建。

验证方式 #

构建完成后，打开项目的build（Vite项目为dist）文件夹，检查是否存在.map后缀的文件，没有则说明配置成功。

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