为什么Firebase部署React应用时会暴露未打包源文件而非仅build目录的生产优化产物？

你在Chrome DevTools Sources面板看到的完整原始React源文件，并未被Firebase真实部署到线上服务器，所有异常表现的核心诱因是create-react-app生产构建默认生成的Source Map文件。

具体逻辑拆解 #

• create-react-app执行npm run build的默认生产流程中，会在build目录下为每一个压缩混淆后的JS chunk，生成对应的同名.map后缀Source Map文件。这类文件的设计初衷是辅助开发调试：将经过压缩、变量名混淆、注释删除的chunk代码，反向关联回本地编写的原始源码、注释、行号和目录结构。
• 浏览器加载压缩后的JS chunk时，会自动识别chunk文件末尾附带的//# sourceMappingURL=xxx.js.map标识，静默拉取同路径下对应的.map文件，在DevTools的Sources面板中把映射后的原始源码完整还原展示。这个还原过程完全由浏览器调试逻辑驱动，和服务器上实际存储的文件结构没有关系。
• 在Network面板只看到build目录下的chunk文件，是因为没有筛选查看Source Map类的资源请求：只要存在.map文件，浏览器必然会发起对应请求拉取该文件，而这些.map文件本身就存放在配置的public: build目录下，会被Firebase正常部署到线上。

常见认知误区纠正 #

• 不存在React生产构建未压缩、未移除注释的问题：检查build目录下的chunk文件看不到注释是完全正确的——经过压缩的chunk本身确实删除了所有注释、做了变量名混淆，原始注释和源码内容被独立存放在.map文件中，并没有嵌入chunk内部。
• 浏览器无法在没有映射文件的情况下凭空还原原始源码：如果没有对应的.map文件，DevTools根本不可能展示出精准对应本地目录结构、保留全部开发期注释的源文件。

可选解决方案 #

• 如果不希望普通用户通过DevTools看到原始源码，可以在构建时通过环境变量关闭Source Map生成：执行GENERATE_SOURCEMAP=false npm run build，再执行部署流程即可。此时构建产物里不会生成.map文件，DevTools也只能看到压缩混淆后的chunk代码，无法还原出原始src目录下的文件。
• 如果需要保留线上调试能力，但不想让公开用户轻易获取源码，可以通过Hosting规则配置权限校验，仅允许内部调试网络访问.map文件，普通用户请求映射文件时返回403即可。
• 现有Firebase Hosting配置本身没有错误：public指向build目录、忽略规则、SPA路由重写的配置均符合预期，不存在把本地src目录下的未打包源文件直接上传到服务器的问题。Sources面板里看到的src目录，本质是Source Map还原出的虚拟路径，并非服务器上真实存在的可直接访问的文件。

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