了解这一点之前不要使用 Create React App

前几天，一位同事注意到了我们生产代码中一个有趣的地方：你可以在浏览器中查看我们原始的、格式完美的代码。一开始我心想：“但我是为生产环境构建的，所以它应该被压缩成难以阅读的格式，对吧？”

我一直以为Create React App (CRA) 已经帮我搞定了。难道我一直被骗了？

源地图。

是的，原因在于源映射。所以我了解了它们，并觉得有必要对它们进行一些阐述，以便其他人（比如我）能够了解它们，并做出更明智的决定。

什么是源地图？

使用 CRA 构建 React 应用时，你基本上是在使用 webpack 和 babel 来转译、压缩和打包你为部署而编写的 JavaScript/TypeScript 代码。在此过程中，你的文件需要经过映射才能恢复到原始格式。这时，源映射就派上用场了。

源映射只是 JSON 文件，本质上重建了打包器和转译器所更改的内容。它们的主要目的是帮助调试已构建的、优化的代码。

这是有道理的，如果你有一个错误并查看堆栈跟踪，你想看到你的代码而不是 webpack 和 babel 吐出的乱码。

CRA 中的默认环境变量GENERATE_SOURCEMAP=true。这意味着一旦构建完成，生成的文件夹中将会生成额外的“.map”文件。它看起来类似于：

然后浏览器可以使用 .map 文件重建原始代码，并在浏览器开发工具中查看。

当时GENERATE_SOURCEMAP=false，相同的代码将如下所示：

以下是加拿大税务局 (CRA) 文档所述：

最后，我该怎么做？保留源映射还是删除它们。

我个人认为这取决于你的需求，但基本上是的。我认为 CRA 的说法是正确的（默认情况下，它们是生成的，但可以被覆盖）。

下面我列出了一些有关生成源地图的要点，以帮助您做出选择：

因为没有它们：

拥有它们：

是的，基本上就是这样。这似乎取决于你是否在意用户是否查看你的源代码，以及你是否希望拥有在生产环境中调试的能力。

重要提示：如果您生成了源映射，则会创建额外的 .map 文件。不过，这些文件不会增加包的大小，因为只有在开发工具打开时，客户端才会请求这些文件 😏*

请告诉我你对在生产环境中生成 Source Map 有什么看法。你是禁用它们，还是保留它们？

此外，如果您想核实我的事实，我很乐意了解有关源地图的更多信息。

查看我用来了解源地图的这些资源：