何时创建-反应-应用混淆或缩小代码

我有一个关于 webpack 和反应的基本问题，我可以使用帮助(围绕代码混淆/丑化(。

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

在该文件中，似乎所有内容都放入主文件.JS文件和主文件中。CSS 文件等我使用"火力基地部署"(就我而言(实时推送此内容。我希望我的代码被丑化，并且不能被任何开发人员完全读取。

但是当我去Chrome中查看我的应用程序时，它没有显示main.JS或任何其他捆绑包文件。它只显示每个单独的文件和我编写的代码。知道这是为什么吗？为什么它没有在 chrome 的"来源"选项卡下显示丑陋的组合主.js文件？这与源映射有关吗？

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

React 在构建过程中缩小代码并生成源映射。JS最终被混淆为缩小的副产品，而不是因为保密。这样，最终用户能够比未缩小脚本更快地加载脚本，并且当您(或他们(打开开发人员工具时，您(和其他所有人(可以浏览原始代码。

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

要禁用源映射生成，请在将环境变量设置为 false 的情况下运行构建GENERATE_SOURCEMAP 。

GENERATE_SOURCEMAP=false npm run build

或

GENERATE_SOURCEMAP=false yarn build

或者将其作为build脚本的一部分package.json

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

如果省略源映射生成，.map文件最终将不会投入生产，并且您的原始源代码将不可供任何人(包括您(使用。

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

npm run build --nomaps

这对

我有帮助：

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

试试这个：

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

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

也许这是Firebase的事情，因为我们正在使用Firebase的免费版本或其他免费部署服务，如Now，Surge，netlify或其他什么？我也不确定。

混淆

React 代码...

井。。。我一直在尝试混淆反应代码，而 StackOverflow 并没有让我的搜索完全正确:(

因此，我最终在这里而不是"通过自动更改所有函数和变量名称来模糊生产中的反应代码"。

所以对于那些迷失在试图混淆代码的人来说......特瑟是道路。

正如我在这里指出的那样:)