Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 608
Ray Shan Avatar asked May 24 '14 18:05

Ray Shan


People also ask

Should you use source maps in production?

Most JavaScript and CSS sources are usually minified and source maps serve as a memory map to the compressed files. It's generally a good practice to minify and combine your assets (Javascript & CSS) when deploying to production.

What is CSS source map?

A “source map” is a special file that connects a minified/uglified version of an asset (CSS or JavaScript) to the original authored version.

What is JavaScript source map?

Source maps create a map from these compressed asset files back to the source files. This source map allows you to debug and view the source code of your compressed assets, as if you were actually working with the original CSS and Javascript source code.

Is source map needed?

Firstly: No, there is no necessity for source maps whatsoever. You need not even generate them, unless you want to use them for debugging.


1 Answers

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.

like image 61
pnichols Avatar answered Sep 24 '22 00:09

pnichols