诱因
默认情况下,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;
}这样即使文件存在,用户也无法通过浏览器访问