81
  • 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.

Ray Shan
  • 1,646
  • 3
  • 17
  • 25
  • 1
    Well, a pointless HTTP request definitely takes time and bandwidth. – Pointy May 24 '14 at 18:33
  • 3
    Did I miss something? Isn't source-maps meant for debugging, wouldn't you eventually remove those in production code ? – adeneo May 24 '14 at 18:35
  • 4
    Because source maps are located in comments, I would assume that the browser ignores them until they are specifically requested, such as in the developer console. – Wex May 24 '14 at 18:35
  • 1
    @Wex sourcemaps can be inlined or served as separate `.map` file; @others, perhaps I'm asking this just for clarification that there are no benefits other than debugging. However since so many js libraries are expecting `.map`, such as `AngularJS`, did we just place undue burden on the web by inventing sourcemaps? – Ray Shan May 24 '14 at 18:37
  • 1
    @Wex This is what I thought as well but it would be nice to have a definitive answer. Are external .map assets requested only when the developer opens the developer tools? What about inline source maps? – Wenzil May 07 '15 at 03:54

2 Answers2

101

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.

pnichols
  • 2,198
  • 4
  • 24
  • 29
-1

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/

Jason
  • 57
  • 1
  • 8