javascript - 源映射的目的是什么？

Question

有人可以解释一下源 map 的意义吗？因为正如我所见，我的连接和缩小文件与 100 多个模块一起被加载(谈论 JavaScript)。当我加载的大小是以前的两倍时，这如何不影响性能？

Answer 1

source map 的要点是你可以运行缩小的 Javascript 或转译的 Javascript(这在调试器中本身并不是特别可读)，但是当你打开调试器时，调试器会加载 source map 并且它给出出于调试目的，您可以使用可读形式的源代码。如果浏览器未配置源映射调试，则不会加载源映射。

如果您将代码从 TypeScript 或 ES6 之类的代码转换为 ES5 Javascript，那么源映射也非常有用，这样您就可以看到您最初在调试器中编写的实际代码，而不仅仅是转换和缩小的输出。

在源 map 出现之前，另一种选择是让你的网站有单独的版本或在你的网站上加载非缩小的 JS 选项，这样你就可以用普通的符号进行调试，但这当然不是真正的调试完全相同的代码，所以即便如此，这仍然会让您不得不尝试调试缩小的代码。

您可以 read here关于如何在 Chrome 调试器中启用源映射。如果您正在查看浏览器下载的内容，请确保您使用的浏览器在检查是否已下载时未启用源 map 。