What is the purpose of source maps?

Question

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?

Answer 1

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.

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.

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.

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.

Answer 2

Because you only load the sourcemap when you open the debugger.

Actual users, who don't open the debugger, still get the benefit of the minification.

Answer 3

A source map is a developer tool. It's practical to know the original source when an error occurs within minified source, so you can track down the source of the error.

Source maps are thus only loaded by debuggers, and will not be loaded by default. However, you should consider disabling source maps for production environments, because debug data usually shouldn't be on production environments: for performance and (more importantly) security reasons