我如何制作 react-create-app 来缩小我的代码？

Question

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

所有代码都由 nginx 提供。

好的，我看过这个 When does create-react-app obfuscate or minify code? 还有这个GENERATE_SOURCEMAP=false Issue 并阅读此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

嗯，

1. 我们如何检查是否看到代码，代码是否最小化？

我们应该在服务器上输入 js，比如文件扩展名。如果它们很明显 - 最小化（混淆和丑化）不起作用（这是我的情况）

1. 我们需要删除源映射以禁止用户查看我们的代码。

另一种解决方案是在项目的根目录中创建一个新文件 名为 .env 的目录，并在文件中包含以下内容。这 下一个将从您的 build/static/js 文件夹中删除所有 .map 文件 运行构建的时间。

对我不起作用。我已经创建了 permission.env 并添加了

GENERATE_SOURCEMAP=false

进入它然后运行

npm run build

我附上了我在生成的构建中搜索 *.map 扩展文件的屏幕截图。即使我们创建了 *.env 文件，它们也在这里。

所以我添加了

  },
  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

在我的package.json 中再次运行npm run build。我们可以看到没有地图文件 - 因此该命令帮助了我们。

Answer 2

我的感觉是，您的大部分问题实际上都与缩小代码实际含义的混淆有关。

定义

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

来源：Why Minify JavaScript Code?

应用于创建 React 应用

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

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

构建被缩小，文件名包含哈希。如有必要，可以启用类名和函数名以进行分析。请参阅production build section 了解更多信息。

来源：Create React App: 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 - Use a source map

开发者工具“Inspector”

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

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

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