Search code examples
javascriptvisual-studiobundling-and-minification

JS map file reference - how it is used?


My project has lot of js and css files that are getting referenced in the aspx pages. When i see my project files for every js / css file there is one .map file as well. E.g-> kendo.all.min.js and kendo.all.min.js.map When i try to search "kendo.all.min.js.map" in Visual Studio solution it is found under kendo.all.min.js but it is commented like below :

//# sourceMappingURL=kendo.all.min.js.map

When i read over web it says these files are for minifications when used in production environment but my question is how they get refreneced in prod , the code is commented and how these files know that they need to be used in production there should be some kind of mapping. What i am missing ?


Solution

  • .map files aren't generally meant for production code. Their purpose is to map between a transpiled-or-otherwise-modified version of a file (which runs in the browser) and the original source file (which might look different) for debugging purposes: You can put breakpoints and such in the code that the browser is running and then, when they're reached, the browser can show the original source file and the original code for where the breakpoint is.

    For production, you usually don't A) provide access to the .map files, or B) provide access to the original files they reference.