reactjs - 使用 Firebase 部署 React 应用程序时如何隐藏源代码？

Question

这是我在 stackoverflow 上的第一篇文章。我写信是因为我找不到我的问题的明确答案。我不知道标题是否正确，但这是我的选择。

情况： 我正在用 react 创建一个单页应用程序，并打算用 node.js 和 express.js 构建后端，但现在它只是 react。我曾经create-react-app创建项目，并且使用 Firebase 进行托管。
文件中要部署的firebase.json文件夹设置为build. 因此，当我想将我的 Web 应用程序部署到 Firebase 时，我npm run build首先使用该命令来创建将要部署的构建文件夹。

然后，当我访问我的网站时，打开 chrome 开发人员工具并单击源，我可以在一个static文件夹中看到我的所有文件。我看到它就像我格式化它的方式一样，就好像我在我的代码编辑器中一样。所有组件。我的整个文件夹结构。基本上，我的应用程序的整个代码都可以完整查看。
我有点震惊和困惑，所以我检查这是否正常。我访问了 youtube 或 twitter 等大型网站，但在它们的源文件夹中几乎找不到任何内容。当我查看 twitter 的源代码时，它确实有一些文件，这些文件只是普通的和开放的 javascript，但不是很多。而且文件夹结构也不可见。我需要使用 Ctrg + P 查看文件。大多数文件看起来也不同，等等。
最好只查看开发工具中 twitter 的源代码部分。我真的不明白我所看到的，但我注意到与我网站的来源相比它是不同的。
他们的 webpack 不知何故没有将包映射成简单易读的代码。我在构建文件夹中的包被映射到它们在被捆绑之前的样子。至少在我看来是这样。

简单而简短：我网站的来源显示了所有内容（所有文件）原样供所有人查看。大网站的来源它不这样做。他们的秘密以某种方式隐藏起来。我想知道他们做了什么，他们是如何做到的，以及我怎样才能做到这一点。

我看到很多人说如果没有安全风险并不重要，而且我对混淆有所了解，但我相信他们也会做其他事情。
我还想强调，这与我是否需要这样做无关。我想这样做，但我现在不知道如何或什么。我还没有找到任何地方完全解决了这个问题，所以我真的不明白它是如何完成的。

我很感谢我能得到的任何帮助。

标签： reactjsfirebasedeploymentgoogle-chrome-devtoolshosting

Answer 1

放入然后运行GENERATE_SOURCEMAP=false。希望它会奏效。package.json scripts -> buildsnpm run build

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

检查此参考如何禁用 React JS 应用程序的源映射