Source Map介绍 -浏览器篇

朴灿烈づ我的快乐病毒、 2024-04-17 05:37 69阅读 0赞

### Source Map介绍 - 浏览器篇 ###

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

# Source Map介绍 #

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

## 浏览器source map ##

*  chrome sourcemap功能设置界面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_12_color_FFFFFF_t_70]

### 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在线编码解码工具][VLQ]

## 浏览器支持 ##

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

## 参考链接 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_12_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/73a98102b1b14b34b8ccfc2495b23c12.png
[VLQ]: http://murzwin.com/base64vlq.html
[Source Maps]: https://www.cnblogs.com/fsjohnhuang/p/4208566.html
[An Introduction to Source Maps]: https://blog.teamtreehouse.com/introduction-source-maps
[JavaScript Source Map]: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
[Introduction to JavaScript Source Maps]: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-base64vlq
[Source Map]: https://sq.163yun.com/blog/article/169954100295163904