Source Maps简介

  • 时间:
  • 浏览:0
  • 来源:大发时时彩官网_大发时时彩邀请码_大发时时彩娱乐平台

  提高网站性能最简单的土办法之一是合并压缩JavaScript和CSS文件。否则当你须要调试什么压缩文件中的代码时,那将会是一场噩梦。不过否则用担心,souce maps将会帮你补救有并不是问题报告 图片。

  Source map提供了有并不是土办法,要能将压缩文件中的代码映射回源文件中对应的位置。这意味 ,给你借助许多软件很轻易地调试应用多多系统进程 中什么经过优化补救过的资源。Chrome和Firefox提供的开发者工具都内置了对source maps的支持。

  本文将介绍source maps的工作原理,以及要怎样生成它们。我们都将主要关注JavaScript代码的source maps,不过什么原理也同样适用于CSS。

  提示:Firefox开发者工具中的source maps默认是开启的。对于Chrome而言,你将会须要手动启用有并不是功能(译者:目前看来,Chrome含有 并不是功能默认也是开启的)。在Chrome中打开开发者工具(译者:默认的快捷键是F12),否则找到“设置”面板(译者:开发者工具面板的右上角,点击有十个 多点的菜单,其中可不用能 找到“Settings”菜单),在“General”选项卡中勾选“Enable JS source maps”和“Enable CSS source maps”(译者:我所使用的Chrome版本中,有并不是十个 多设置项在“Preferences”选项卡中)。

 Source Maps的工作原理

  顾名思义,source map含有 晒 了许多要能将压缩文件中的代码映射回源代码的信息。对于每十个 多压缩文件,给你为其指定不同的source map。

  通过在经过优化的压缩文件的末尾加进去去一行特殊的注释,来告诉浏览器有可用的source map。

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

  该注释通常由生成source map的多多系统进程 自动加进去去。当浏览器的开发者工具被打开时,将会source maps功能被启用,那么该文件将会被加载。

  你还可不用能 通过在压缩的JavaScript文件的响应中发送X-SourceMap HTTP头来指定source map。

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

  Source map文件含有 十个 多JSON对象,用来描述source map文件有并不是以及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 - 此属性用于说明source map文件的版本。
  • file - source map文件的名称。
  • sources - 一组含有 源文件URLs的数组。
  • sourceRoot - (可选)sources属性中什么URLs相对路径的根目录。
  • names - 含有 源文件中所有变量和函数名称的数组。
  • mappings - 一组含有 实际代码映射的Base64 VLQs的字符串(这正是source map起作用的核心)。

使用UglifyJS生成source maps

  UglifyJS是十个 多很流行的命令行工具,用来合并和压缩JavaScript文件。版本2提供了许多的命令行参数,用来帮助我们都生成source maps。

  • --source-map - 生成的source map文件的名称。
  • --source-map-root - (可选)指定source map文件中sourceRoot属性的值。
  • --source-map-url - (可选)在经过优化的压缩文件底部的注释中指定source map文件的路径。如://# sourceMappingURL=/path/to/script.js.map
  • --in-source-map - (可选)输入的source map。假若你正在压缩的JavaScript文件是从十个 多多源文件生成的。这类 JavaScript库。
  • --prefix-p - (可选) 移除source map文件中sources属性里URLs的路径层级。这类 ,-p 3将会移除路径中的前三级,十个 多多“one/two/three/file.js”会变成“file.js”。使用-p relative会让UglifyJS在source map和源文件之间计算出相对路径。

  下面是十个 多使用什么命令行参数的例子。

uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m

  注意:将会在Grunt中使用grunt-contrib-uglify插件,请参考这里查看要怎样在Gruntfile中使用什么选项。

  还有许多其它可用的工具要能生成source maps文件。下面列出了其中许多。

  • Closure
  • CoffeeScript编译器
  • Grunt任务中的grunt-jsmin-sourcemap

Chrome开发者工具中的source maps

Chrome开发者工具中的Sources选项卡

  将会你的source maps设置正确,那么你将在Sources选项卡中都看所有的JavaScript源文件。

  查看页面的HTML代码,给你发现仅十个 多多压缩的JavaScript文件被引用。而开发者工具自动加载了对应的source map文件并获取了对应的源文件。

Firefox开发者工具中的source maps

Firefox开发者工具中的调试器面板

  Firefox用户在开发者工具的调试器中要能都看source maps对应的源文件。开发者工具识别出了source map的所处并自动获取了对应的源文件。

许多感想

  使用source map使得开发人员要能在调试环境下直观地查看并维护代码,一起网站也获得了更好的性能提升。

  本文介绍了source maps的工作原理以及要怎样用UglifyJS生成source maps。将会你的网站使用了压缩过的资源(推荐十个 多多做),那么可不用能 考虑花点时间将source map整合到其中。

有用的链接

  • Source Maps版本3的提案
  • UglifyJS
  • Source Mapg Demo

原文地址:https://blog.teamtreehouse.com/introduction-source-maps

猜你喜欢

万达院线O2O之路:欲联合支付宝布终端

2013-12-2613:20  新浪科技    我想要评论()字号:T|T万达院线:欲联合支付宝布终端在万达集团董事长王思聪与阿里集团董事局主席马云的“亿元对赌”作罢后,种种

2019-12-07

刷新纪录!京东生鲜618开场49分钟成交额就超2017年618全天!

6月18日零点钟声一响,京东618全球年中购物节正式进入了高潮期!京东生鲜火力全开,创下多项记录!5分钟成交额超去年618当天第1小时,49分钟成交额超2017年618全天。仅

2019-12-07

华为Mate 20 X叫板Switch,发布会疑似出现北通G1的身影

北京时间10月16日21时,华为在伦敦举行了秋季旗舰新品发布会。在发布会上华为一举回应了华为Mate20、华为Mate20Pro、华为Mate20RS保时捷设计、华为Mate2

2019-12-07

《捉妖记2》激萌预告:小妖王胡巴只身踏上寻亲路

电影《捉妖记2》新“逃之妖妖”版预告发布,本片讲述了天荫和小岚找回胡巴团聚一堂的合家欢故事。《捉妖记2》预告:(IT之家移动客户端用户若无法观看视频,请点此查看)外面的世界风景

2019-12-07

黄氏刀法惊诧江湖!GTX 1070 Ti最深度评测

黄氏刀法惊诧江湖!GTX1070Ti最层厚评测2017-11-0619:44:46    作者:茶茶编辑:后边文Q[爆料]收藏文章在过去显卡市场更为火爆的就让,五个劲显卡的档位

2019-12-07