Why using jquery map?

Question

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?

Answer 1

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

Answer 2

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.