Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why using jquery map?

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

like image 698
Abdelouahab Avatar asked Nov 28 '14 21:11

Abdelouahab


People also ask

What is the use of map function in jQuery?

The $.map() method applies a function to each item in an array or object and maps the results into a new array. Prior to jQuery 1.6, $.map() supports traversing arrays only. As of jQuery 1.6 it also traverses objects.

Why do we use map in JavaScript?

map() creates a new array from calling a function for every array element. map() calls a function once for each element in an array. map() does not execute the function for empty elements.

What is difference between each and map in jQuery?

The each method is meant to be an immutable iterator, where as the map method can be used as an iterator, but is really meant to manipulate the supplied array and return a new array. Another important thing to note is that the each function returns the original array while the map function returns a new array.

What is the difference between map and grep function in jQuery?

Projects In JavaScript & JQueryThe jQuery map function translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements. The grep() function is used to find an element of an array.


2 Answers

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.

like image 106
undefined Avatar answered Oct 24 '22 20:10

undefined


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

like image 33
Bart Jedrocha Avatar answered Oct 24 '22 21:10

Bart Jedrocha