源地图的目的是什么？

Question

有人可以解释源地图的重点吗？因为正如我所看到的，我的连接和缩小文件被加载（谈论JavaScript）以及100多个模块。当我像以前一样加载两倍尺寸时，这如何不影响性能？

Answer 1

因为在打开调试器时只加载了源代码。

没有打开调试程序的实际用户仍然可以获得缩小的好处。

Answer 2

源地图是一个开发工具。在缩小的源代码中发生错误时，知道原始源是很实际的，因此您可以追踪错误的来源。

源映射因此仅由调试器加载，并且不会默认加载。但是，您应该考虑为生产环境禁用源映射，因为调试数据通常不应该位于生产环境中：用于性能和（更重要的是）安全原因

Answer 3

源映射的一点是可以运行缩小的Javascript （在调试器中它本身不具有特别的可读性），但是当您打开调试器时，源映射会被调试器加载，并且它为您提供可读的源代码以用于调试目的。如果浏览器未配置为源映射调试，则源映射不会加载。

如果您将代码从TypeScript或ES6转移到ES5 Javascript，那么源代码映射也非常有用，因此您可以在调试器中看到最初写入的实际代码，而不仅仅是转译和缩小输出。

在源图的日子之前的替代方案是必须在您的网站上有不同版本的网站或选项，以加载非缩小的JS，以便您可以使用普通符号进行调试，但这当然不是实际上调试完全相同的代码，所以即使这样，仍然可能让您不得不尝试调试缩小的代码。

您可以通过read here了解如何在Chrome调试器中启用源映射。如果您正在观看浏览器下载的内容，请确保您使用的浏览器在检查是否下载时未启用源地图。