Performance impact of using css / javascript sourc

Question

• Should source-maps be used in production environment? Do they provide any benefits other than debugging?
• Do they impact app load time due to the additional server round-trips? Are browsers smart enough to load .map assets after app is loaded and rendered?
• If a browser cannot find the .map asset (404 error), would there be performance impact? Should I care about fixing it?

Note that fixing the last one may not be as easy as serving the .map assets if there are complicated concat / minify build steps.

Answer 1

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.

Answer 2

From HTML5 Rocks:

Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files.

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/