create-react-app 何时混淆或缩小代码？

Question

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

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

在该文件中，似乎所有内容都放入了 main.JS 文件和 main.CSS 文件等。我使用“firebase deploy”（在我的情况下）将其实时推送。我希望我的代码被丑化，并且不能被任何开发人员完全阅读。

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

原文由 Kyle Pennell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Viacheslav Luschinskiy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

 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"
    }
  }

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

原文由 jokka 发布，翻译遵循 CC BY-SA 4.0 许可协议