咨询AWS Amplify部署React应用后源码在Chrome DevTools暴露的解决方案

你部署在AWS Amplify上的React应用可通过Chrome DevTools查看完整源码，原因是create-react-app的默认生产构建流程会生成sourcemap映射文件，并将其随编译产物一同上传到公开托管路径，所有访问者均可通过开发者工具加载这些映射文件，查看未压缩的原始业务代码。该现象不属于Amplify部署流程的配置异常。

• 调整生产构建开关：利用create-react-app原生支持的环境变量GENERATE_SOURCEMAP控制sourcemap生成逻辑，将值设为false后，生产构建将不会生成对应的.map源码映射文件
• 修改Amplify构建配置：在原有构建命令中嵌入上述环境变量，调整后的配置参考：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - GENERATE_SOURCEMAP=false yarn run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

• 清理历史缓存：配置更新后触发一次全新的应用构建，在Amplify控制台手动触发全局缓存失效，清除CDN节点上残留的旧版本映射文件，避免历史遗留的公开可访问.map文件泄露源码

• 该配置完全不影响本地开发体验，本地启动开发服务时的热更新、源码断点调试功能不受任何影响
• 如果内部调试场景需要保留sourcemap，不要将生成的.map文件和公开静态资源一同发布，可将映射文件存储在带身份鉴权的私有路径下，仅内部调试时按需加载

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