create-react-app 什么时候混淆或缩小代码？

When does create-react-app obfuscate or minify code?

我有一个关于 webpack 和反应的基本问题，我可以使用帮助（围绕代码 obfuscation/uglification）。

我正在为我的应用程序使用 create-react-app，它似乎为生产创建了一个捆绑构建（在 运行 yarn build 之后）。

在那个文件中，似乎所有内容都放入了 main.JS 文件和 main.CSS 文件等等。我使用 "firebase deploy" 推送这个直播（在我的例子中）。我希望我的代码被丑化并且不能被任何开发人员完全阅读。

但是当我在 Chrome 中查看我的应用程序时，它没有显示 main.JS 或任何其他捆绑文件。它只显示每个单独的文件以及我编写的代码。知道这是为什么吗？为什么在 chrome 的 'sources' 选项卡下不显示丑化后的组合 main.js 文件？跟源图有关系吗？

React 在构建期间缩小代码并生成源映射。 JS 最终被混淆为缩小的副产品，而不是因为保密。这样一来，最终用户加载脚本的速度就会比未压缩的脚本更快，而且当您（或他们）打开开发人员工具时，您（和其他人）可以在原始代码中导航。

如果你在构建后查看 build/static/js 目录，有成对的 .js 和 .map 文件。 JS 文件随您的网站一起加载，.map 文件在打开开发人员工具时按需加载。

要禁用 sourcemap 生成，运行 您的构建 GENERATE_SOURCEMAP 环境变量设置为 false。

GENERATE_SOURCEMAP=false npm run build

或

GENERATE_SOURCEMAP=false yarn build

或使其成为 package.json

中 build 脚本的一部分 
  {
    …
    "scripts": {
      …
-     "build": "react-scripts build"
+     "build": "GENERATE_SOURCEMAP=false react-scripts build"
    }
  }

如果您省略 sourcemap 生成，.map 文件将不会最终投入生产，您的原始源代码将不会对任何人（包括您）可用。

有一种更好的方法可以确保不包含源映射。 在项目根文件夹中创建 .env 文件并添加 GENERATE_SOURCEMAP=false。您将在没有源地图的情况下进行构建。

只需使用 --nomaps 参数构建它：

npm run build --nomaps

试试这个：

{
  …
  "scripts": {
    "build": "set GENERATE_SOURCEMAP=false && react-scripts build"
  }
}

它对我有用并且在生产中不再显示 .map 文件，但它仍然显示每个单独的文件和我们编写的代码，加上 node_modules文件夹。

可能是 firebase 的问题，因为我们使用的是 firebase 的免费版本或其他免费部署服务，如 Now、surge、netlify 或其他什么？我也不确定。

这对我有帮助：

"scripts": {
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",   
  },

混淆 React 代码...

嗯... 我一直在尝试混淆 React 代码，而 Whosebug 没有完全正确地获取我的搜索参数:(

因此我最终来到这里而不是 。

所以对于那些迷失了代码的人来说……Terser 就是这样。

正如我指出的那样 :)