Webpack source map实战分析详解

目录
  • 一、webpack基础
  • 二、source-map
    • 2.1 认识source-map
    • 2.2 如何使用source-map
    • 2.3 source-map文件分析
    • 2.4 source-map常见值
    • 2.5 source-map不常见值
    • 2.6 source-map最佳实践

一、webpack基础

推荐我的另一篇文章:Webpack基础

二、source-map

2.1 认识source-map

代码通常运行在浏览器上时,是通过打包压缩的:

  • 真实跑在浏览器上的代码,和我们编写的代码其实是有差异
  • 比如ES6的代码可能被转换成ES5
  • 比如对应的代码行号、列号在经过编译后肯定会不一致
  • 比如代码进行丑化压缩时,会将编码名称等修改
  • 比如使用了TypeScript等方式编写的代码,最终转换成JavaScript

但是,当代码报错需要调试时(debug),调试转换后的代码是很困难的

那么如何可以调试这种转换后不一致的代码呢?答案就是 source-map

  • source-map 是从已转换的代码,映射到原始的源文件
  • 使浏览器可以重构原始源并在调试器中显示重建的原始源

2.2 如何使用source-map

如何可以使用source-map呢?

const path = require('path')
module.exports = {
  mode: 'production',
  devtool: "source-map",
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './build')
  }
}
console.log("hello world"),console.log("foo function exec~");
//# sourceMappingURL=bundle.js.map
  • 第一步:根据源文件,生成source-map文件,webpack在打包时,可以通过配置生成source-map
  • 第二步:在转换后的代码,最后添加一个注释,它指向sourcemap

浏览器会根据我们的注释,查找相应的source-map,并且根据source-map还原我们的代码,方便进行调试。

在Chrome中,可以按照如下的方式打开source-map:

  • 鼠标右键检查,打开控制台后点击右上角的设置

2.3 source-map文件分析

最初source-map生成的文件大小是原始文件的10倍,第二版减少了约50%,第三版又减少了50%,所以目前一个133kb的文件,最终的source-map的大小大概在300kb。

目前的source-map长什么样子呢?

  • version:当前使用的版本,也就是最新的第三版
  • sources:从哪些文件转换过来的source-map和打包的代码(最初始的文件)
  • names:转换前的变量和属性名称
  • mappings:source-map用来和源文件映射的信息(比如位置信息等),一串base64 VLQ(veriable-length quantity可变长度值)编码
  • file:打包后的文件(浏览器加载的文件)
  • sourceContent:转换前的具体代码信息(和sources是对应的关系)
  • sourceRoot:所有的sources相对的根目录

2.4 source-map常见值

如何在使用webpack打包的时候,生成对应的source-map呢?

  • webpack 提供了非常多的选项(目前是26个),来处理source-map
  • 选择不同的值,生成的source-map会稍微有差异,打包的过程也会有性能的差异,可以根据不同的情况进行选择

下面几个值不会生成source-map

false:不使用source-map,也就是没有任何和source-map相关的内容

noneproduction模式下的默认值(什么值都不写) ,不生成source-map

evaldevelopment模式下的默认值,不生成source-map

  • 但是它会在eval执行的代码中,添加 //# sourceURL=
  • 它会被浏览器在执行时解析,并且在调试面板中生成对应的一些文件目录,方便我们调试代码

其他常见的值

  • source-map:通常在production模式下设置,生成一个独立的source-map文件,并且在bundle文件中有一个注释,指向source-map文件
  • bundle文件中有如下的注释:
  • 开发工具会根据这个注释找到source-map文件,并且解析 //# sourceMappingURL=bundle.js.map

2.5 source-map不常见值

eval-source-map:会生成sourcemap,但是source-map是以DataUrl添加到eval函数的后面

inline-source-map:会生成sourcemap,但是source-map是以DataUrl添加到bundle文件的后面

cheap-source-map(development):

  • 会生成sourcemap,但是会更加高效一些(cheap低开销),因为它没有生成列映射(Column Mapping)
  • 平常在开发中,只需要行信息通常就可以定位到错误了

cheap-module-source-map(development):

  • 会生成sourcemap,类似于cheap-source-map,但是对源自loader的sourcemap处理会更好
  • 比如通过 babel-loader来处理,生成的source-map文件会将一些空行删掉,无法更好的还原,此时可以使用此选项

hidden-source-map:

  • 会生成sourcemap,但是不会对source-map文件进行引用
  • 相当于删除了打包文件中对sourcemap的引用注释

如果我们手动添加进来,那么sourcemap就会生效了

//# sourceMappingURL=bundle.js.map

nosources-source-map:会生成sourcemap,但是生成的sourcemap只有错误信息的提示,不会生成源代码文件

组合值

组合的规则如下:

  • inline-|hidden-|eval:三个值时三选一
  • nosources:可选值
  • cheap可选值,并且可以跟随module的值

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

2.6 source-map最佳实践

开发阶段:推荐使用 source-map 或者 cheap-module-source-map

  • 这分别是vue和react使用的值,可以获取调试信息,方便快速开发

测试阶段:推荐使用 source-map 或者 cheap-module-source-map

  • 测试阶段我们也希望在浏览器下看到正确的错误提示

发布阶段:false缺省值(不写)

以上就是Webpack source map示例分析详解的详细内容,更多关于Webpack source map的资料请关注我们其它相关文章!

(0)

相关推荐

  • maptalks+three.js+vue webpack实现二维地图上贴三维模型操作

    我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_ 最终效果如图:(地图上添加一个"三维地图"的toolbar按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框) 以下都在已经引入并且初始化maptalks地图的基础上,如何引入使用maptalks可以查看以下文章 https://www.jb51.net/article/192983.htm 1.安装maptalks.three包 npm install maptalks.three 2.安装three包 npm install

  • 浅谈webpack devtool里的7种SourceMap模式

    我们先来看看文档对这 7 种模式的解释: 模式 解释 eval 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释 //@ sourceURL. source-map 生成一个SourceMap文件. hidden-source-map 和 source-map 一样,但不会在 bundle 末尾追加注释. inline-source-map 生成一个 DataUrl 形式的 SourceMap 文件. eval-source-map 每个module会通过eval()来执

  • webpack将js打包后的map文件详解

    类似于这样的map文件 由webpack自动生成 参数: devtool: '#eval-source-map',//映射js到原文件 由于打包后的js调试不方面,所以应用此,自动映射报错到原文件 还是很有用的 同样的css设置如下 { test: /\.css$/, loader: 'style-loader!css-loader?sourceMap' } 以上这篇webpack将js打包后的map文件详解是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴

  • Webpack中Source Map配置深入解析

    目录 为什么需要Source Map devtool选项 devtool为false和'eval'有啥区别 准备工作 1,创建项目 安装依赖 2,添加文件 3,写配置 webpack.config.js 4,在package.json中添加 5,执行 npm run build,打包文件生成到了dist文件夹中,至此,准备工作完毕. 观察devtool为false时 1, 在dist/main.js中 2,在浏览器中,观察开发者工具中的Sources. 小结 观察devtool为'eval'时

  • Webpack source map实战分析详解

    目录 一.webpack基础 二.source-map 2.1 认识source-map 2.2 如何使用source-map 2.3 source-map文件分析 2.4 source-map常见值 2.5 source-map不常见值 2.6 source-map最佳实践 一.webpack基础 推荐我的另一篇文章:Webpack基础 二.source-map 2.1 认识source-map 代码通常运行在浏览器上时,是通过打包压缩的: 真实跑在浏览器上的代码,和我们编写的代码其实是有差异

  • Python实战实现爬取天气数据并完成可视化分析详解

    1.实现需求: 从网上(随便一个网址,我爬的网址会在评论区告诉大家,dddd)获取某一年的历史天气信息,包括每天最高气温.最低气温.天气状况.风向等,完成以下功能: (1)将获取的数据信息存储到csv格式的文件中,文件命名为”城市名称.csv”,其中每行数据格式为“日期,最高温,最低温,天气,风向”: (2)在数据中增加“平均温度”一列,其中:平均温度=(最高温+最低温)/2,在同一张图中绘制两个城市一年平均气温走势折线图: (3)统计两个城市各类天气的天数,并绘制条形图进行对比,假设适合旅游的

  • 从实战角度详解Disruptor高性能队列

    目录 一.背景 二.Java内置队列 三.ArrayBlockingQueue的问题 1.加锁 a.关于锁和CAS b.锁 c.原子变量 2.伪共享 a.什么是共享 b.缓存行 c.什么是伪共享 四.Disruptor的设计方案 1.一个生产者 2.多个生产者 a.读数据 b.写数据 五.总结 六.性能 七.等待策略 生产者的等待策略 消费者的等待策略 八.Log4j 2应用场景 1.性能差异 一.背景 Disruptor是英国外汇交易公司LMAX开发的一个高性能队列,研发的初衷是解决内存队列的

  • Java Map集合用法详解

    目录 Map集合的概述 常用方法: 遍历方式: Map的实现类: HashMap TreeMap 集合嵌套(补充知识): 高频面试题 1.Map 2.HashMap的底层实现 Map集合的概述 概述:interface Map<K,V> 其中K是键的类型,键是唯一的,不重复.V是值的类型,是可以重复.且每个键可以映射最多一个值.注意的是如果存在两个相同的键时,则会将现在的值替换之前的值. 创建方式:以多态的形式创建对象. 特点: 键值对映射关系 一个键对应一个值 键不能重复,值可以重复 元素存

  • jvm垃圾回收之GC调优工具分析详解

    进行GC性能调优时, 需要明确了解, 当前的GC行为对系统和用户有多大的影响.有多种监控GC的工具和方法, 本章将逐一介绍常用的工具. JVM 在程序执行的过程中, 提供了GC行为的原生数据.那么, 我们就可以利用这些原生数据来生成各种报告.原生数据(raw data) 包括: 各个内存池的当前使用情况, 各个内存池的总容量, 每次GC暂停的持续时间, GC暂停在各个阶段的持续时间. 可以通过这些数据算出各种指标, 例如: 程序的内存分配率, 提升率等等.本章主要介绍如何获取原生数据. 后续的章

  • SpringCloud微服务续约实现源码分析详解

    目录 一.前言 二.客户端续约 1.入口 构造初始化 initScheduledTasks()调度执行心跳任务 2.TimedSupervisorTask组件 构造初始化 TimedSupervisorTask#run()任务逻辑 3.心跳任务 HeartbeatThread私有内部类 发送心跳 4.发送心跳到注册中心 构建请求数据发送心跳 三.服务端处理客户端续约 1.InstanceRegistry#renew()逻辑 2.PeerAwareInstanceRegistryImpl#rene

  • Java CompletableFuture实现原理分析详解

    目录 简介 CompletableFuture类结构 CompletableFuture回调原理 CompletableFuture异步原理 总结 简介 前面的一篇文章你知道Java8并发新特性CompletableFuture吗?介绍了CompletableFuture的特性以及一些使用方法,今天我们主要来聊一聊CompletableFuture的回调功能以及异步工作原理是如何实现的. CompletableFuture类结构 1.CompletableFuture类结构主要有两个属性 pub

  • java 三种将list转换为map的方法详解

    java 三种将list转换为map的方法详解 在本文中,介绍三种将list转换为map的方法: 1) 传统方法 假设有某个类如下 class Movie { private Integer rank; private String description; public Movie(Integer rank, String description) { super(); this.rank = rank; this.description = description; } public Int

  • js es6系列教程 - 新的类语法实战选项卡(详解)

    其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一.用es6封装一个基本的类 class Person{ constructor( uName ){ this.userName = uName; } sayName(){ return this.userName; } } 是不是很向php和java中的类, 其实本质还是原型链,我们往下看就知道了 首先说下语法规则: class Person中的Person就是类名,可以自定义

  • Java逃逸分析详解及代码示例

    概念引入 我们都知道,Java 创建的对象都是被分配到堆内存上,但是事实并不是这么绝对,通过对Java对象分配的过程分析,可以知道有两个地方会导致Java中创建出来的对象并一定分别在所认为的堆上.这两个点分别是Java中的逃逸分析和TLAB(Thread Local Allocation Buffer)线程私有的缓存区. 基本概念介绍 逃逸分析,是一种可以有效减少Java程序中同步负载和内存堆分配压力的跨函数全局数据流分析算法.通过逃逸分析,Java Hotspot编译器能够分析出一个新的对象的

随机推荐