Performance Impact of Using CSS/JavaScript Source-Maps in Production

Performance impact of using css / javascript source-maps in production?

A quick test using Charles Web Proxy shows that source maps are only loaded if developer tools are opened. If you load a page without dev tools opened, there is no http request for source maps.

The behaviour was the same in Chrome 43 and Firefox 38.

So it appears they would be no impact on production environment.

Source Maps on Production. Are they necessary?

No, you only need source maps if you want to use them to debug the code.

---

Side note: Don't worry about the //# sourceMappingURL=... line in the file (if it survives your minification process). Browsers will only attempt to download the source map if you open dev tools and go to the code panel, so you won't be getting 404s for the missing maps in normal use. It's not ideal, and hopefully your process removes them, but if they're there it's mostly harmless. Of course, if someone did open the dev tools and go to the code panel, yes, the browser would try to get the file (and presumably fail, as you haven't put them on production).

JS map file reference - how it is used?

.map files aren't generally meant for production code. Their purpose is to map between a transpiled-or-otherwise-modified version of a file (which runs in the browser) and the original source file (which might look different) for debugging purposes: You can put breakpoints and such in the code that the browser is running and then, when they're reached, the browser can show the original source file and the original code for where the breakpoint is.

For production, you usually don't A) provide access to the .map files, or B) provide access to the original files they reference.

Why inline source maps?

I searched around and the only reason I could see that people inline source maps is for use in development. Inlined source maps should not be used in production.

The rational for inlining the source maps with your minified files is that the browser is parsing the exact same JavaScript in development and production. Some minifiers like Closure Compiler do more than 'just' minify the code. Using the advanced options it can also do things like: dead code removal, function inlining, or aggressive variable renaming. This makes the minified code (potentially) functionally different than the source file.

This could still be done by referencing external source map files of course, but some people seem to prefer inlining for their build process.

---

Related Topics