将JavaScript压缩代码映射到源码

Posted 2021-04-17 晟亿信息

将JavaScript压缩代码映射到源码

现在几乎所有web项目在部署到线上服务器之前都会将javascript源码做处理，例如编译，合并，压缩等。这样加速了在浏览器上的加载，不过给调试线上问题时带来了挑战。使用source map可以把代码映射到源码，帮助我们解决了这个问题。

什么是source map？

Source map是一种基于JSON的映射格式，提供了在一个压缩后文件和它的源码文件之间的映射关系。当你构建项目上线运行时，在压缩和合并JavaScript文件的同时，会生成一个包含原始文件信息的source map文件。

Source map是如何工作的？

Source map通常是由JavaScript编译/压缩工具生成的，它通常以.map为后缀，以JavaScript注释的方式嵌入到压缩后的文件中，句法如下：

//# sourceMappingURL=/path/to/your/sourcemap.map

或者你也可以在HTTP响应头里指定它的位置，告知浏览器在哪里获取source map文件：

SourceMap: <url>

X-SourceMap: <url> (deprecated)

浏览器在确定了source map文件后，会下载文件并读取其内容，然后在调试工具中重新构建编译前的源码。

哪些工具可以生成 source map？

现在，几乎所有编译成JavaScript语言的软件都可以生成源代码地图——包括Coffeescript、TypeScript、Babel等等，像UglifyJS这样的压缩工具也可以生成 source map。

在浏览器开发者工具中的 source map

主流的浏览器都提供了官方的开发者工具，当在开发者工具中运行source map时，你会注意到JavaScript是未编译的，你可以看到所有引用到的单个JavaScript文件。这是因为使用了source map，而实际上浏览器运行的是编译后的代码。任何错误，日志和断点都会映射到源码文件以方便我们调试！

这里以Chrome浏览器为例介绍如何在开发者工具的设置中开启source map。Source map 从Chrome 39开始默认是启用的，你可以检查一下是否启用了。首先打开开发者工具，然后点击齿轮图标。在 Sources 部分，选中 Enable JavaScript Source Maps。

使用source map调试

上图中 sm.js 是编译后的文件，也是浏览器实际运行的文件，而entry.js和util.js是开发者工具根据source map还原而来的源码文件。

如果代码中有报错，可以方便地跟踪到源码具体位置。你也可以在其中添加断点，例如点击util.js为add() 函数添加断点，再次运行到此函数时会看到断点已经生效：

总结

在开发和测试阶段，为了方便调试跟踪问题，建议生成source map文件并随着代码部署到测试服务器上。而对于正式线上运营的服务器，建议去掉source map，或者为它们设置访问权限，避免源码泄露。

扫描二维码