admin 管理员组

文章数量: 1184232

Source Map介绍 - 浏览器篇

  • Source Map介绍
    • 浏览器source map
      • source map 使用介绍和原理
    • 浏览器支持
    • 参考链接

Source Map介绍

在做网站性能优化的时候，我们经常会做js和css代码压缩。但是压缩之 后的代码在调试的时候就会异常困难。source map就是解决问题的一种解决方案

浏览器source map

  • chrome sourcemap功能设置界面

source map 使用介绍和原理

  • 第一种方式
    在你的压缩文件末尾加上下面注释。如果你开了devtool并且开启了sourcemap功能，浏览器就会去加载这个map文件

    //# sourceMappingURL=/path/to/script.js.map

  • 第二种方式
    在HTTP响应头上面设置X-SourceMap如下

    X-SourceMap: /path/to/script.js.map

  • sourcemap文件格式基本介绍

    {
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    "sourcesContent": [
" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require funct"],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}
    • version：Source map的版本，目前为3。
    • file：转换后的文件名。
    • sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
    • sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
    • sourceContent：转换前文件的内容。当没有配置sources的时候会使用该项
    • names：转换前的所有变量名和属性名。
    • mappings：一个base64 VLQ编码映射到真实代码位置的字符串。
      • mappings字符串用;分割的一组对应生成代码中的一行；
        每一组用,分割的一段对应生成代码中的一个位置信息；
        每一段里是5个数字的Base64 VLQ编码，比如[9,0,0,1,1]这5个数字的编码是SAACC：
        第0个数字，表示这个位置在生成代码的第几列；
        第1个数字，表示这个位置属于sources属性中的哪一个文件；
        第2个数字，表示这个位置属于原始代码的第几行；
        第3个数字，表示这个位置属于原始代码的第几列；
        第4个数字，表示这个位置属于names属性中的哪一个变量。这个数字不是必需的，可以省略。
        由于Base64 VLQ编码是变长的，所以每一段可以由多个字符构成。
        VLQ在线编码解码工具

浏览器支持

目前，Chrome、Firefox、Safari和IE11都支持Javascript和CSS的Source Map了，并且默认都是启用的，你可以用下面的方式确认一下。

参考链接

  1. 前端构建：Source Maps详解
  2. An Introduction to Source Maps
  3. 阮一峰 JavaScript Source Map 详解
  4. Introduction to JavaScript Source Maps
  5. Source Map详解

本文标签： 浏览器 Source mAP

版权声明：本文标题：Source Map介绍 -浏览器篇 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1768022426a3526988.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。