源映射的目的是什么? [英] What is the purpose of source maps?

问题描述

有人可以解释一下源地图的意义吗?因为在我看来，我的连接和缩小的文件与 100 多个模块一起加载(谈论 JavaScript).当我加载两倍于以前的大小时，这如何不影响性能?

Can someone please explain what the point is of source maps? Because as I see it, my concatenated and minified file gets loaded (talking about JavaScript), alongside 100+ modules. How is this not affecting performance when I'm loading twice the size as before?

推荐答案

源映射的要点是您可以运行缩小的 Javascript 或转译的 Javascript(这在调试器中本身不是特别可读)，但是当您打开调试器，源映射由调试器加载，它为您提供了一个可读形式的源代码以供调试.如果浏览器未配置源映射调试，则不会加载源映射.

The point of a source map is that you can run minified Javascript or transpiled Javascript (which is not particularly readable in a debugger by itself), but when you open the debugger, the source map is loaded by the debugger and it gives you a readable form of your source for debugging purposes. The source map is not loaded if the browser is not configured for source map debugging.

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

Source maps are also extremely useful if you are transpiling code from something like TypeScript or ES6 down to ES5 Javascript so you can see the actual code that you wrote originally in the debugger rather than only the transpiled and minified output.

在源地图时代之前的替代方案是在您的网站上拥有单独版本的站点或选项，这些版本将加载非缩小的 JS，以便您可以使用普通符号进行调试，但这当然实际上并不是调试完全相同的代码，所以即使那样，这仍然可能让您不得不尝试调试缩小的代码.

The alternative before the days of source maps was to have separate versions of your site or options on your site that would load non-minified JS so that you could debug with normal symbols, but this of course isn't actually debugging the exact same code so even then, this could still leave you having to try to debug minified code.

您可以阅读此处了解源地图是如何在 Chrome 调试器中启用.如果您正在查看浏览器下载的内容，请确保您使用的浏览器在检查是否已下载时未启用源映射.

You can read here about how source maps are enabled in the Chrome debugger. If you're watching what is downloaded by the browser, then make sure that you are using a browser that does not have source maps enabled when checking if they are downloaded.

这篇关于源映射的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！