诱因

默认情况下,Create React App(CRA)或其他构建工具(Vite、Webpack)在执行 build 命令时,会生成 source map 文件

何为 Source Map ?

Source Map 是一种映射文件(通常是 .map 文件),它将压缩/编译后的代码(main.js)映射回原始的源代码(App.jsx)。它的主要作用是方便调试:即使代码被压缩、混淆或转译(JSX → JS、ES6+ → ES5),开发者依然可以在浏览器中看到原始代码结构。

解决方法

方法一:禁用 source map 生成

如果使用的是 Create React App (CRA)

在项目根目录创建一个或修改已有文件 .env.production ,加入以下内容:

GENERATE_SOURCEMAP=false

重新运行 npm run build,这样构建出的产物将不包含 .map 文件,JS 文件末尾也不会有 sourceMappingURL 注释

如果使用的是 Vite

vite.config.js 中配置:

export default defineConfig({
  build: {
    sourcemap: false, // 关闭 source map
  },
});

如果使用的是 自定义 Webpack 配置

webpack.config.prod.js 中设置:

module.exports = {
  devtool: false, // 或 'hidden-source-map'(生成但不引用)
  // ...
};

方法二:部署时删除 .map 文件

如果无法修改构建配置,也可以在部署脚本中手动删除:

# 构建后删除所有 .map 文件
rm build/static/**/*.map

方法三:通过服务器配置阻止访问 .map 文件

在 Nginx 中添加:

location ~ \.map$ {
  deny all;
}

这样即使文件存在,用户也无法通过浏览器访问

最后修改:2025 年 11 月 26 日
如果觉得我的文章对你有用,请随意赞赏