jquery-1.11.3.min.map 是啥？有啥用处没有？

Posted 2023-05-13

因为jquery文件的输出有两种，一个是压缩和混淆过的，一种是正常的文件

map文件就是压缩和混淆过程产生的产物，它保存了压缩前的标示符和压缩后的 标示符的映射
目前chrome对此文件能很好的查看，chrome下载jquery。min。js时，会自动去对应目录下载map文件，借助这个文件chrome能帮助调试jquery。mins。js，将其美化为可读的代码 参考技术A 调试的时候用，

为啥要使用 jquery 地图？

【中文标题】为啥要使用 jquery 地图？

【英文标题】：Why using jquery map?为什么要使用 jquery 地图？

【发布时间】：2015-01-27 13:16:45

【问题描述】：

为什么使用jquery.min.map 如果：

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

如果我们删除 cmets，我们将得到一个更易于阅读（和调试）的小型 jquery。

那么，如果map 只会添加超过100 ko 和额外的请求，为什么还要使用它呢？

最佳做法是什么？

【问题讨论】：

地图？据我了解，这是为了让你找回未压缩的版本，这样在 chrome dev 或 firefox 上调试起来更容易

Javascript .map files - javascript source maps的可能重复

【参考方案1】：

只有在开发者工具处于活动状态时才会加载源地图。浏览器不会为应用程序的用户加载它们。

编辑：应该提到有两种类型的源地图。一个是外部文件，在实际文件中有指向它的链接，另一个是嵌入在主文件中。浏览器实际上必须为第二种类型加载整个文件（即包括嵌入的源映射）。

查看https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/了解更多信息。

【讨论】：

啊！最后我明白了！但似乎在chrome中我使用39.0.2171.71 m我必须从链接中指定地图才能带来它，而不是在我打开源代码后自动，谢谢:)

【参考方案2】：

这称为源映射。这个answer 详细介绍了它们是什么、它们是如何工作的以及您为什么要使用它。

编辑

从上面的 SO 链接中提取答案以供后代使用。回复@aaronfrost

.map 文件用于已缩小的 js 和 css 文件。它们被称为 SourceMaps。当你缩小一个文件时，比如 angular.js 文件，它需要数千行漂亮的代码，然后把它变成只有几行丑陋的代码。希望当您将代码交付生产时，您使用的是缩小后的代码，而不是完整的、未缩小的版本。当您的应用程序在生产中并出现错误时，源映射将帮助您获取丑陋的文件，并允许您查看代码的原始版本。如果您没有源映射，那么任何错误充其量都显得晦涩难懂。

CSS 文件也是如此。一旦你获取一个 SASS 或 LESS 文件并将其编译为 CSS，它看起来与它的原始形式完全不同。如果启用 sourcemaps，那么您可以看到文件的原始状态，而不是修改后的状态。

它有什么用？

取消引用丑化代码

开发者如何使用它？

您将其用于调试生产应用程序。在开发模式下，您可以使用完整版的 Angular。在生产中，您将使用缩小版。

我应该关心创建 js.map 文件吗？

如果您关心能够更轻松地调试生产代码，那么是的，您应该这样做。

它是如何创建的？

它是在构建时创建的。有一些构建工具可以像构建其他文件一样为您构建 .map 文件。 https://github.com/gruntjs/grunt-contrib-uglify/issues/71