新闻英文网站源码分享 英语新闻的网站

大家好，今天小编来为大家解答新闻英文网站源码分享这个问题，英语新闻的网站很多人还不知道，现在让我们一起来看看吧！

Sourcemap想必大家都不陌生。线上的代码多是压缩后的，如果线上有报错却只能调试那个代码多半是个噩梦。因此我们需要有一个桥梁帮助我们搭建起源代码及压缩后代码的联系，sourcemap就是起了这个作用。

以下是MDN对于sourcemap的解释：

调试原始源代码会比浏览器下载的转换后的代码更加容易。sourcemap[1]是从已转换的代码映射到原始源的文件，使浏览器能够重构原始源并在调试器中显示重建的原始源。

但是不知道各位读者有没有对sourcemap的原理产生过疑问？笔者列出了四个疑问，不知道各位是不是也存在过这样的问题：

Sourcemap四问

接下来的内容会逐步为读者解答这四问。

sourcemap文件是否影响网页性能

这个答案肯定是不会影响，否则构建相关的优化就肯定会涉及到对于sourcemap的处理了，毕竟sourcemap文件也不小。

其实sourcemap只有在打开devtools的情况下才会开始下载，相信大部分用户都不会去打开这个面板，所以这也就不是问题了。

这时可能会有读者想说：哎，但是我好像从来没有在Network里看到sourcemap文件的加载呀？其实这只是浏览器隐藏了而已，如果大家使用抓包工具的话就能发现在打开devtools的时候开始下载sourcemap了。

sourcemap存在标准嘛？

sourcemap是存在一个标准的，为Google及Mozilla的工程师制定，文档地址[2]。正是因为存在这份标准，各个打包器及浏览器才能生成及使用sourcemap，否则就乱套了。

各个打包器基本都基于该库[3]来生成sourcemap，当然也存在一些魔改的方案，但是标准都是统一的。

通过上面的库生成出来的sourcemap格式大致如下，大家也可以对比各个打包器的产物，格式及内容大部分都是一致的：

{version:3,file:&34;,names:[&34;,&34;,&34;],sources:[&34;,&34;],sourceRoot:&34;,mappings:&34;}

接下来笔者介绍下重要字段的作用：

?version：顾名思义，指代了版本号，目前sourcemap标准的版本为3，也就是说这份sourcemap使用的是第三版标准产出的?file：编译后的文件名?names：一个优化用的字段，后续会在mappings中用到?sources：多个源文件名?mappings：这是最重要的内容，表示了源代码及编译后代码的关系，但是先略过这块，下文中会详细解释

另外大部分应用都是由webpack来打包的，可能有些读者会发现webpack的sourcemap产出的字段与上面的略微有些不一致。

这是因为webpack魔改了一些东西，但是底下还是基于这个库实现的，只是变动了一些不涉及核心的字段，具体代码[4]。

浏览器怎么知道源文件和sourcemap的关系？

这里我们以webpack做个实验，通过webpack5对于以下代码进行打包：

//index.jsconsta=1console.log(a);

当我们开启sourcemap选项以后，产物应该为两个文件，分别为bundle.js以及bundle.js.map。

查看bundle.js文件以后我们会发现代码中存在这一一段注释：

console.log(1);//34;webpack://webpack-source-demo/./src/index.js&39;console&39;log&39;AACAA,QAAQC,IADE',}

首先mappings的内容其实是Base64VLQ的编码表示。

内容由三部分组成，分别为：

?英文，表示源码及压缩代码的位置关联?逗号，分隔一行代码中的内容。比如说console.log(a)就由console、log及a三部分组成，所以存在两个逗号。?分号，代表换行

逗号和分号想必大家没啥疑问，但是对于这几个英文内容应该会很困惑。

其实这就是一种压缩数字内容的编码方式，毕竟源代码可能很庞大，用数字表示行数及列数的话sourcemap文件将也会很庞大，因此选用Base64来代表数字用以减少文件体积。

比如说A代表了数字0，C代表了数字1等等，有兴趣的读者可以通过该网站[6]了解映射关系。

了解了这层编码的映射关系，我们再来聊聊这一串串英文到底代表了什么。

其实这每串英文中的字母都代表了一个位置：

1.压缩代码的第几列2.哪个源代码文件，毕竟可以多个文件打包成一个，对应sources字段3.源代码第几行4.源代码第几列5.names字段里的索引

这时读者可能有个疑惑，为啥没有压缩代码的第几行表示？这是因为压缩后的代码就一行，所以只需要表示第几列就行了。

更新：有读者询问Base64表达的数字是有上限的，如果需要表示的数字很大的话该怎么办。实际上除了每个分号中的第一串英文是用来表示代码的第几行第几列的绝对位置之外，后面的都是相对于之前的位置来做加减法的。

了解完以上知识以后，我们就来根据上文的内容解析下AACAA的具体含义吧，通过该网站[7]我们可以知道AACAA对应了[0,0,1,0,0]，这里需要注意的是数字都从0开始，笔者表述的时候会自动加一，毕竟代码第零行听起来怪怪的。

1.压缩代码的第一列2.第一个源代码文件，也就是index.js文件了3.源代码第二行了4.源代码的第一列5.names数组中的第一个索引，也就是console

通过以上的解析，我们就能知道console在源代码及压缩文件中的具体位置了。

但是为什么sourcemap会知道编译后的代码具体在什么位置呢？这里就要用到AST了。让我们打开网站[8]输入console.log(a)后观察右边的内容，你应该会发现如图所示的数据：

image-20210516214636867

因为sourcemap是由AST产出的，所以我们能用上AST中的这个数据。

sourcemap的应用

一般来说sourcemap的应用都是在监控系统中，开发者构建完应用后，通过插件将源代码及sourcemap上传至平台中。一旦客户端上报错误后，我们就可以通过该库[9]来还原源代码的报错位置（具体API看文档即可），方便开发者快速定位线上问题。

最后

sourcemap是我们日常中经常用到的东西，但是直到学习这块内容的时候才知道居然涉及到了那么多的知识盲区。

大家如果有什么疑问欢迎在评论区交流。

引用链接

[1]sourcemap:https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/[2]文档地址:https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit[3]该库:https://github.com/mozilla/source-map[4]具体代码:https://github.com/webpack/webpack-sources/blob/master/lib/SourceMapSource.js[5]MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/SourceMap[6]该网站:https://www.murzwin.com/base64vlq.html[7]该网站:https://www.murzwin.com/base64vlq.html[8]网站:https://astexplorer.net/[9]该库:https://github.com/mozilla/source-map

关于本次新闻英文网站源码分享和英语新闻的网站的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。