23

Why using jquery.min.map if:

jquery = 242 ko
jquery.min + jquery.min.map = 83 + 125 = 208 ko (the map is even greater than the library)

And if we remove the comments, we will get a small jquery that could be easier to read (and to debug).

So, why using the map if it will only add more than 100 ko and an extra request?

What is the best practice?

screenshot

Abdelouahab
  • 7,331
  • 11
  • 52
  • 82
  • the map? from what i understood, it is to allow you getting back the uncompressed version, so be easier to debug on chrome dev or firefox – Abdelouahab Nov 28 '14 at 21:32
  • 2
    possible duplicate of [Javascript .map files - javascript source maps](http://stackoverflow.com/questions/21719562/javascript-map-files-javascript-source-maps) – Emil Lundberg Feb 12 '15 at 11:17

2 Answers2

41

Source maps are loaded only when the developer tools are active. Browsers won't load them for application's users.

Edit: It should be mentioned that there are 2 types of source maps. One which is an external file and there is a link to it in the actual file and another one which is embedded in the main file. Browsers actually have to load the entire file (i.e. including the embedded source map) for the second type.

Check https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more information.

Ram
  • 143,282
  • 16
  • 168
  • 197
  • ah! finally i got it! but it seems that in chrome i use `39.0.2171.71 m` i have to specify the map from link to bring it, and not automaticaly after i open the source, thank you :) – Abdelouahab Nov 28 '14 at 21:42
7

That's called a source map. This answer goes into detail about what they are, how they work, and why you would want to use it.

EDIT

Extracted answer from the above SO link for posterity. Answered by @aaronfrost

The .map files are for js and css files that have been minified. They are called SourceMaps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the sourcemap will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the sourcemap, then any error would seem cryptic at best.

Same for CSS files. Once you take a SASS or LESS file and compile it to CSS, it looks nothing like it's original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.

What is it for?

To de-reference uglified code

How can a developer use it?

You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.

Should I care about creating a js.map file?

If you care about being able to debug production code easier, then yes, you should do it.

How does it get created?

It is created at build time. There are build tools that can build your .map file for you as it does other files. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Community
  • 1
  • 1
Bart Jedrocha
  • 11,450
  • 5
  • 43
  • 53