针对 Source Maps 的一篇介绍(翻译)
栏目: JavaScript · 发布时间: 5年前
内容简介:组合并且压缩你的JavaScript 和 CSS文件是提高性能最方便的方式之一。但是当你需要调试这些压缩后的代码的时候会发生什么呢?它可能是异常噩梦。不过不用怕,这里有一个通过source maps的name来解决的问题的方案。source maps提供了一种将压缩后的文件代码映射到源文件的初始位置的方式。这意味着在软件的帮助下,你可以轻易的调试你的应用甚至在你已经做了代码优化(压缩)处理的情况下。谷歌以及火狐浏览器的开发者工具目前都内置了对source maps的支持。
组合并且压缩你的JavaScript 和 CSS文件是提高性能最方便的方式之一。但是当你需要调试这些压缩后的代码的时候会发生什么呢?它可能是异常噩梦。不过不用怕,这里有一个通过source maps的name来解决的问题的方案。
source maps提供了一种将压缩后的文件代码映射到源文件的初始位置的方式。这意味着在软件的帮助下,你可以轻易的调试你的应用甚至在你已经做了代码优化(压缩)处理的情况下。谷歌以及火狐浏览器的开发者 工具 目前都内置了对source maps的支持。
这篇博客将告诉你source maps的工作原理以及如何生成。我们将主要关注JS的源映射,CSS的源映射也是相同原理。
注意:Firefox的开发人员工具默认启用对源映射的支持。您可能需要在Chrome中手动启用支持。要执行此操作,请启动Chrome开发工具并打开“ 设置”窗格(右下角的齿轮)。在常规选项卡中,确保启用JS源地图和启用CSS源的地图都打勾。
源映射的工作原理
顾名思义,源映射由一大堆文件组成,使压缩后的代码可以映射回源文件。你可以为每一个压缩后的文件提供不同的源映射。
通过在优化(压缩)后的文件的底部添加特殊注释,向浏览器提供可用的源映射。
//# sourceMappingURL=/path/to/script.js.map 复制代码
此注释通常由用于生成源映射的程序添加。如果启用了对源映射的支持并且开发人员工具已打开,则开发人员工具将仅加载此文件。
您还可以通过X-SourceMap在压缩的JavaScript文件的响应中发送HTTP header来指定源映射。
X-SourceMap: /path/to/script.js.map 复制代码
源映射文件包含一个JSON对象,其中包含有关映射本身和原始JavaScript文件的信息。这是一个简单的例子:
{ version: 3, file: "script.js.map", sources: [ "app.js", "content.js", "widget.js" ], sourceRoot: "/", names: ["slideUp", "slideDown", "save"], mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..." } 复制代码
让我们仔细看看每个属性。
- version- 此属性指示文件所遵循的源映射规范的版本。
- file - 源映射文件的名称。
- sources - 原始源文件的URL数组。
- sourceRoot- (可选)sources将解析数组中所有文件的URL 。
- names - 包含源文件中所有变量和函数名称的数组。
- mappings- 包含实际代码映射的Base64 VLQ字符串。(这是魔术发生的地方。)
使用UglifyJS生成源映射
UglifyJS是一个受欢迎的命令行工具,可以对你的文件进行组合压缩。版本2 支持大量的命令行标志用以生成source maps。
- --source-map - 源映射的输出文件。
- --source-map-root- (可选)这将填充sourceRoot地图文件中的属性。
- --source-map-url - (可选)服务器上源映射的路径。这将被放在优化文件的注释中。//# sourceMappingURL=/path/to/script.js.map
- --in-source-map - (可选)输入源映射。如果要压缩已从其他位置的源文件生成的JavaScript文件,这可能很有用。想想JavaScript库。
- --prefix或-p- (可选)n从sources属性中显示的文件路径中删除多个目录。例如,-p 3将从文件路径中删除前三个目录,因此one/two/three/file.js将成为file.js。使用-p relative将使UglifyJS为您找出源地图和原始文件之间的相对路径。
如下示例:
uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m 复制代码
除此之外还有其他的工具可以用来生成source maps。列表如下:
谷歌浏览器开发者工具中的Source Maps
如果你正确设置了源映射,则应该会看到Sources选项卡的文件窗格中列出的每个原始JavaScript文件。
检查页面的HTML,确认仅引用了压缩的JavaScript文件。开发工具正在加载源映射文件,然后获取每个原始源文件。
火狐浏览器开发者工具中的Source Maps
Firefox用户可以在开发者工具的“ 调试器”选项卡中查看各个源文件。dev工具再次确定源映射可用,然后获取每个引用的源文件。
如果您希望查看压缩版本,请单击选项卡右上角的齿轮图标,然后取消选择 Show original sources(显示原始源)。
以上所述就是小编给大家介绍的《针对 Source Maps 的一篇介绍(翻译)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- [React Hooks 翻译] 1-8 介绍Hooks
- Testing Flutter apps翻译-Widget测试介绍
- Elastic APM-Go Agent介绍(中文翻译)
- 基于 Laravel、Lumen 框架集成百度翻译、有道翻译、Google 翻译扩展包
- 腾讯发布人工智能辅助翻译 致敬人工翻译
- golang调用baidu翻译api实现自动翻译
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。