【译】Source Maps浅析
Time:2019/10/27~2019/10/29 Link: 原文链接 译文开始: 对网站进行性能优化对一个最容易的方法就是把JS和CSS进行打包压缩。但是当你需要调试这些压缩文件中的代码的时候,会发生什么?可能会是一场噩梦。但是,不用害怕,即将有一个解决方案到来,它就是Source Maps。 source maps提供一种将压缩文件中的代码映射回源文件中原始位置的方法。这意味着,借助一些软件的帮助,即使你的资源被压缩,你也可以轻易调试你的程序。Chrome和Firefox内置的开发者工具都支持source maps了。 在这篇文章中,你将会学习到source maps的实现原理以及怎么去生成source maps。我们主要是关注JavaScript代码的source maps,但是这些原则同样适用于CSS的source maps。 Source Maps实现原理 顾名思义,source map(源映射)就是包含一堆的信息,可以将压缩文件的代码映射回到源代码。你可以为每个压缩文件指定不同的source map。 通过在压缩文件底部添加特殊的注释,向浏览器表明souce map是可用的。 //# sourceMappingURL=/path/to/script.js.map 该注释通常会被用于生成source map的程序添加。仅当开发者工具支持source