在 ReactJS 应用程序的生产环境中添加源映射是否会对性能产生影响？ [复制]答案

【问题标题】：Is there any performance impact of adding source-maps in production in ReactJS application? [duplicate]在 ReactJS 应用程序的生产环境中添加源映射是否会对性能产生影响？ [复制]
【发布时间】：2020-07-09 00:22:51
【问题描述】：

源地图是否会因额外的服务器往返次数而影响应用程序加载时间？如果我们删除/禁用源映射，那么会有任何性能/应用程序加载时间优势吗？

它还会增加捆绑包的大小吗？

谢谢，拉梅什

【问题讨论】：

添加任何内容都会增加加载或初始化任何内容的时间。
但是我听说只有打开开发者工具才会加载源地图。如果您在未打开开发工具的情况下加载页面，则没有对源映射的 HTTP 请求。

标签： javascript reactjs performance create-react-app

【解决方案1】：

这里是 MDN 的链接，https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map

如果您通过注释符号添加源映射，那么除了注释添加的字节的权重之外，不会有零影响:-)

但是，如果您将源映射作为资源添加到 JavaScript 文件或 HTML 中，那么是的，浏览器会加载链接到的所有资源。

我希望这是有道理的。

【讨论】：

【解决方案2】：

是的。根据您的代码源映射的复杂性，会显着增加整个项目的大小，从而导致更长的加载时间。

在一个项目中，我使用删除源映射将下载大小减少了一半以上 - 加载速度增加了一倍。但是，您的里程可能会有所不同。

【讨论】：

但是我听说只有打开开发者工具才会加载源地图。如果您在未打开开发工具的情况下加载页面，则没有对源映射的 HTTP 请求。