我怎样才能让react-create-app 来缩小我的代码？

Question

我需要缩小服务器上的代码。它告诉我npm run build做所有缩小的事情 但在我的服务器上（当然我不是通过访问它localhost）它显示了所有代码。我正在mavennpm run build中做pom.xml。我的包 json 包含反应脚本的实际版本。

所有代码均由 nginx 提供。

好的，我已经看到了 When does create-react-app obfuscate or minify code? 这个GENERATE_SOURCEMAP=false 问题 并阅读这个https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-howgenerate 它告诉我所以Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files. 它告诉我源映射是我看到我的代码的原因照原样。

还有一个没有 devTools 的 Firefox 浏览器，我在其中关闭了源映射

并且...它按原样向我显示了代码！

npm run build 尽管“使构建缩小”，为什么它仍然向我显示代码？请告诉我哪里不好以及如何解决？顺便说一句，到处都写着 *.env 应该位于根目录中。整个项目的根目录还是仅前端文件夹？

Answer 1

我觉得你的大部分问题实际上与对缩小代码的实际含义的混淆有关。

定义

压缩，也称为最小化，是从 JavaScript 源代码中删除所有不必要的字符而不改变其功能的过程。这包括删除空格、注释和分号，以及使用较短的变量名称和函数。JavaScript 代码的缩小导致文件大小紧凑。

来源：为什么要缩小 JavaScript 代码？

应用于创建 React App

在您的情况下，npm run build将执行Create React Appreact-scripts build提供的命令。该文档解释了它的作用：

将用于生产的应用程序构建到构建文件夹。它在生产模式下正确捆绑 React 并优化构建以获得最佳性能。

构建被缩小，文件名包含哈希值。如有必要，可以启用类名和函数名以进行分析。有关更多信息，请参阅生产构建部分。

来源：创建 React 应用程序：npm run build

运行时npm run build，它将创建一个build文件夹。在里面，./build/static您通常会找到缩小的代码（javascript、css、媒体……）。

您可能./build/static/js会找到以下文件：

- [hash].chunk.js
- [hash].chunk.js.map
- main.[hash].chunk.js
- main.[hash].chunk.js.map
- runtime-main.[hash].chunk.js
- runtime-main.[hash].chunk.js.map

注意：确切的输出将根据您的 Create React App 版本而有所不同。

什么是源地图？

正如您在上面注意到的，构建文件夹包含*.js.map每个文件的一个文件.js，这些是源映射。

生成这些的原因是出于调试目的。如果您尝试使用浏览器的开发人员工具来调试代码，您将很难理解缩小的（并且可能是丑陋的代码）。通过添加这些.map文件，您的浏览器可以加载这些文件（通过使用 HTTP 标头）并表示您的代码，就像您正在查看原始代码一样。

您可以在此处找到更多信息：MDN - 使用源映射

开发者工具“检查器”

每个主要浏览器都有一种使用“开发人员工具”查看或调试应用程序的方法。这些开发人员工具通常会显示经过修改的代码版本，以便开发人员更容易阅读。

如果您想验证您的 HTML 代码是否已缩小，您可以检查以下两件事：

• 检查您的./build/index.html文件并确保build您的网络服务器仅托管该文件夹
• 不要使用“检查器”，而是查看页面源代码（通常您可以通过右键单击页面并选择“查看页面源代码”来查看）