source map 开发优化工具

什么是 Source map

简单来说 Source map 就是一个存储信息的文件,里面储存着位置信息。

Source map 英文释义:源程序映射。

位置信息:转换后的代码 对应的 转换前的代码 位置映射关系。

有了 Source map,就算线上运行的是转换后的代码,调试工具中也可以直接显示转换前的代码。这极大的方便了我们开发者调试和排错。

Source map 文件介绍

就以上述案例生成的 main.js.map 为例,我们来了解一下,它的内容结构是怎样的。

{// version:Source map 的版本,目前为 3。"version": 3,// file:转换后的文件名。"file": "main.js",// sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。"sourceRoot": "",// sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。"sources": ["webpack://app/./main.js"],// sourcesContent:原始代码"sourcesContent": ["alert('tomato')\r\n"],// names:转换前的所有变量名和属性名。"names": ["alert"],// mappings:记录位置信息的字符串,下文详细介绍。"mappings": "AAAAA,MAAM"
}

webpack 中 devtool 的多种配置

查看官方文档,可以了解到,devtools 的配置项可以达到 10-20 种左右的情况。其实并不需要记住那么多情况,本质上是一些配置项的排列组合。

配置项如下:

  1. source-map:生成 sourcemap 文件,可以配置 inline,会以 dataURL 的方式内联,可以配置 hidden,只生成 sourcemap,不和生成的文件关联;
  2. hidden:是否会在打包后文件的末尾增加 sourceURL;
  3. inline:不产生独立的 .map 文件,把 source-map 的内容以 dataURI 的方式追加到目标文件末尾;
  4. eval:浏览器 devtool 支持通过 sourceUrl 来把 eval 的内容单独生成文件,还可以进一步通过 sourceMappingUrl 来映射回源码,webpack 利用这个特性来简化了 sourcemap 的处理,可以直接从模块开始映射,不用从 bundle 级别。
  5. cheap:只映射到源代码的某一行,不精确到列,可以提升 sourcemap 生成速度;
  6. nosources:不生成 sourceContent 内容,可以减小 sourcemap 文件的大小;
  7. module: sourcemap 生成时会关联每一步 loader 生成的 sourcemap,可以映射回最初的源码;

不同的配置之间可以排列组合

eval

eval : 每一个模块都执行eval()过程,并且会追加//@ sourceURL

eval-source-map:每一个模块在执行eval()过程之后,并且会为每一个模块生成sourcemap文件,生成的sourcemap文件通过DataURL的方式添加

eval会将每一个module模块,执行eval,执行后不会生成sourcemap文件,仅仅是在每一个模块后,增加sourceURL来关联模块处理前后的对应关系。举例来说:

webpackJsonp([1],[  
function(module,exports,__webpack_require__){    
eval(...      
//# sourceURL=webpack:///./src/js/index.js?')},  
function(module,exports,__webpack_require__){    
eval(...      
//# sourceURL=webpack:///./src/static/css/app.less?./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader')},  
function(module,exports,__webpack_require__){   eval(...      //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?")},
...])

上述是一个指定devtool:eval的压缩后的代码,我们发现压缩后的代码的每一个模块后面都增加了一端包含sourceURL的注释,sourceURL的值是压缩前的代码,这样就通过sourceURL关联了压缩前后的代码,并没有为每一个模块生成相应的sourcemap。

因为不需要生成模块的sourcemap,因此打包的速度很快。

注意!

eval-source-map组合使用是指将.map以DataURL的形式引入到打包好的模块中,类似于inline属性的效果,我们在生产中,使用eval-source-map会使打包后的文件太大,因此在生产环境中不会使用eval-source-map。但是因为eval的rebuild速度快,因此我们可以在本地环境中增加eval属性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/825622.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑技巧:如何把Edge浏览器扩展程序打包安装到其他浏览器

目录 1、进入浏览器扩展界面 2、找到Edge浏览器扩展插件的路径 3、找到需要扩展的插件ID 4、打开浏览器扩展插件目录 5、进入打包扩展界面 6、 安装到其他浏览器 大家日常使用浏览器的时候通常会安装很多浏览器插件,从而大大提升我们的办公效率,有…

带小数点的String类型数据,如何只取整数?

一、场景引入 如果前端页面存在列表展示用户数据,但是用户数据存在非常多的小数位,从页面来看,数据太多就会不太美观,因此,出于场景美化考虑,在不影响业务功能的情况下,可以只展示整数内容&…

代码编辑器特效爆炸html5

源码介绍 代码编辑器特效爆炸html5,代码高亮显示,输入代码爆炸动态效果显示。非常的帅气,爱不释手~ 效果截图 源码下载 代码编辑器特效爆炸html5

Flask 解决指定端口无法生效问题

问题重现 手动指定的IP端口是app.run(host0.0.0.0, port9304),但是启动的地址显示的却是http://127.0.0.1:5000。 if __name__ __main__:app.run(host0.0.0.0, port9304)启动地址如下: 解决方案 PyCharm会自动识别出来flask项目(即使你…

Py深度学习基础|Numpy基础总结

注:本文来自菜鸟教程学习总结 一、数组属性 NumPy 的数组中比较重要 ndarray 对象属性有: 注意:使用reshape后,数组的结构(即元素的排列顺序和内在连接)没有改变,但因为返回的是一个视图&#…

机器学习笔记 - 使用 OpenCV 的结构化森林进行边缘检测

一、简述 边缘检测是计算机视觉领域中一项非常重要的任务。这是许多纯计算机视觉任务(例如轮廓检测)的第一步。即使涉及深度学习,较深层也首先学习识别边缘,然后再学习图像的复杂特征。所以,我们可以说边缘检测在计算机视觉领域非常重要。拥有良好且高效的图像边缘检测算法…

Flink KafkaSink分区配置的不同版本对比

Flink KafkaSink分区配置的不同版本对比 在不同版本的Flink中,KafkaSink 分区默认配置方式可能会有一些变化。以下是摘自Flink官方文档不同版本的原文: 1. Flink版本:1.12~1.19 Sink 分区 # 配置项 sink.partitioner 指定了从 Flink 分区到 …

Yoshua Bengio独家专访:我不想把大模型未来押注在Scaling Law上,AGI路上要“注意安全”...

导读 漫长的30年间,数度从主流方向的超然出走,是Bengio的制胜秘诀。这种不盲从主流的风格体现在他研究生涯的方方面面。 90年代末期,神经网络被打入冷宫,Bengio的论文多次遭拒,连学生们也开始担心,和他一起…

【ESP32 手机配网教程】

【ESP32 手机配网教程】 1. 前言2. 先决条件2.1 环境配置2.2 所需零件3.3 硬件连接步骤 3. Web热点手动配网3.1. 准备工作3.2. 编译上传程序3.3. 进行手动配网 4. BLE无线配网4.1. 准备工作**4.2. 编译上传程序4.3. 使用手机APP进行无线配网 5. 总结 1. 前言 欢迎使用ESP32进行…

python将xml格式文件转成png或者pdf格式

本文主要介绍运行NCCL代码时输出的xml文件该如何转成更加容易观看的图格式 如下是举例&#xff0c;服务器上的PCIE相关的topo xml 文件 <system version"1"><cpu numaid"1" affinity"ffffff00,0000ffff,ff000000" arch"x86_64&q…

Next.js多页布局getLayout使用方法

目录 官网解释 直接上代码使用方法展示 1.page页面​编辑 2._app.js页面,也放在pages中​编辑 效果展示 有getLayout展示getLayout返回的页面布局 无getLayout展示默认布局 官网解释 如果需要多个布局&#xff0c;可以添加一个属性getLayout添加到您的页面&#xff0c;允…

2024华中杯数学建模挑战赛选题建议及各题思路来啦!

大家好呀&#xff0c;华中杯数学建模开始了&#xff0c;来说一下初步的选题建议吧&#xff1a; 首先定下主基调&#xff0c; 本次华中杯推荐选择C题目。难度方面A&#xff1e;B&#xff1e;C&#xff0c;A是优化类题目&#xff0c;难度较高&#xff0c;建议参考23国赛A优秀论…

深入探索:Facebook如何重塑社交互动

在当代社会中&#xff0c;社交互动已成为日常生活的核心组成部分。而在众多的社交媒体平台中&#xff0c;Facebook凭借其卓越的用户基础和创新的功能&#xff0c;已经成为了全球最大的社交媒体平台。本文将深入探讨Facebook如何通过其独特的特性和功能&#xff0c;重塑了人们的…

Springboot+Vue线上教学平台赠送配套文档1w字

SpringbootVue线上教学平台赠送配套文档1w字 项目描述 线上教学平台是一个功能丰富的在线教育工具&#xff0c;它为学生、教师和管理员提供了一个集成的学习、交流和管理环境。以下是关于该平台各项功能的简要介绍&#xff1a; 前台门户&#xff1a;前台门户是平台的门面&#…

实战|哈尔滨等保2.0 Linux主机测评过程之身份鉴别

一、身份鉴别 a)应对登录的用户进行身份标识和鉴别&#xff0c;身份标识具有唯一性&#xff0c;身份鉴别信息具有复杂度要求并定期更换。 输入 more /etc/shadow,得知系统所有用户&#xff0c;此语句字段格式有九段。 第一字段&#xff1a;用户名&#xff08;也被称为登录名…

jmeter-while控制器用法

condition中添加while结束循环的条件&#xff0c;以下语句的意思是&#xff0c;当percent等于100时&#xff0c;就跳出while循环继续执行 ${__javaScript("${percent}" ! 100)} 举例&#xff0c;以下方法是getPercent为一个引出的异步接口&#xff0c;该接口的返回包…

HiveSql中的函数家族(二)

一、窗口函数 1、什么是窗口函数 在 SQL 中&#xff0c;窗口函数&#xff08;Window Functions&#xff09;是一种特殊的函数&#xff0c;它允许在查询结果集的特定窗口&#xff08;通常是一组行&#xff09;上执行聚合、分析和计算操作&#xff0c;而无需聚合整个结果集。窗口…

FTP客户端Transmit 5 for Mac中文激活版

Transmit 5是一款功能强大的Mac FTP客户端软件&#xff0c;它由Panic公司开发&#xff0c;为用户提供简单、高效的文件传输体验。 Transmit 5 for Mac中文激活版下载 Transmit 5支持多种传输协议&#xff0c;如FTP、SFTP、WebDAV和Amazon S3等&#xff0c;满足用户不同的文件传…

【公司UI自动化学习】

公司课程链接&#xff1a;https://l.jd.com/student/project/project.du?project_id697509403 公司的课程&#xff0c;是给一个学习方向。 一、 PC自动化 1&#xff09;什么项目适合 2&#xff09;PC自动化介入时间点 3&#xff09;自动化率&#xff1a; 频繁改动的&…

不需要GPU就可以玩转模型,同时支持本地化部署

简单一款不需要GPU就可以在Win 机器跑的模型&#xff1a;Ollama&#xff1b;用于本地运行和部署大型语言模型&#xff08;LLMs&#xff09;的开源工具 关于Ollama的简要介绍 平台兼容性&#xff1a;Ollama支持多种操作系统&#xff0c;包括macOS、Linux和Windows&#xff0c;…