一、source map 概述

我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。举例来说，如果压缩等处理过的生产环境中的代码出现bug，调试的时候只能定位到压缩处理后的代码的位置，无法定位到开发环境中的源代码。

sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。这里的处理操作包括：

I）压缩，减小体积

II）将多个文件合并成同一个文件

III）其他语言编译成javascript，比如TypeScript和CoffeeScript等

source map的更多相关文章

  1. Javascript 如何生成Less和Js的Source map

    为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...

  2. 源映射(Source Map)详解

    一.什么是源映射 为了提高性能,很多站点都会先压缩 JavaScript 代码然后上线, 但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置. 这时源映射就登场 ...

  3. Source Map调试压缩后代码

    在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代 ...

  4. JavaScript Source Map 详解

    源码地址: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html 上周,jQuery 1.9发布. 这是2.0版之前的最后 ...

  5. java source map

    Chrome 更新后出现了 jquery.min.map 404  (Not Found) 的信息 这个到底是什么东西?查询了一下,得到了以下资料 JQuery 官方解释 摘录一下內容 从 jQuer ...

  6. Source Map入门教程

    部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真 ...

  7. source map 的原理探究

    线上产品代码一般是编译过的,前端的编译处理过程包括不限于 转译器/Transpilers (Babel, Traceur) 编译器/Compilers (Closure Compiler, TypeS ...

  8. Source map error

    前端访问接口时火狐浏览器控制台出现了这个问题, source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压 ...

  9. 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

    如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...

随机推荐

  1. 使用selenium时，使用从系统启动浏览器与通过自动化驱动方式启动浏览器控件ID不一样解决方法

    最近遇到一个怪事,通过正常打开浏览器,按照正常的web登录然后点击进入系统流程,将各控件的ID识别成功,然后使用 python3+selenium写好脚本,高高兴兴的用脚本跑时老是提示找不到控件,然后 ...

  2. c# 行转列动态赋值给layui

    数据库存储格式 期望前端显示样式 以下是代码: (1)控制器: [HttpGet("SocialImportLedgerInfo")] public ResultData GetS ...

  3. C#中webbrowser与javascript(js)交互的方法

    今天在做一个项目的时候需要用c#搞一个webbrowser,然后有些地方还需要与js交互.所以就查了一下资料,发现很多博客提到了但是却没有说下具体的操作.所以我就写一下. 开发环境是Visual St ...

  4. 第11章 AOF持久化

    AOF持久化在硬盘上保存的是对Redis进行的逻辑操作,类似InnoDB中的bin log.说白了就是你对一个Redis输入了哪些语句,AOF文件都会原封不动的保存起来,等到需要回复Redis的时候再 ...

  5. Python：Day14 集合、函数

    浅copy只copy一层 深copy相当于克隆一份 深copy要引入copy,具体如下: import copy wife = copy.copy() #此为浅copy,括号中要加copy的对象,相当 ...

  6. Y7000 （1）安装ubuntu1604遇到的问题

    1安装系统 分区的时候 /boot  不再是引导分区 换成 “为系统bois保留的分区” 这个分区取代 /boot 2第一次进系统没有图形界面 在刚开机 ubuntu系统时 按e 在splash后面空 ...

  7. Arduino和ESP8266引脚图

    Arduino的引脚图 https://www.geek-workshop.com/thread-11826-1-1.html ESP8266 https://item.taobao.com/item ...

  8. WiFi-ESP8266入门http（3-4）网页一键配网（1若为普通wifi直连 2若为西电网页认证自动网页post请求连接）+网页按钮灯控+MQTT通信

    网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信 工程连接:https://github.com/Dongvdong/ESP8266_H ...

  9. poj-1330(暴力写的lca)

    传送门 一看就是lca的板子题 然而 (写这个的时候我忘了怎么写lca) 于是我就试着写暴力了 本以为会tle结果e了一次后居然a掉了 开心到起飞.嘿嘿嘿 但还是格式输出错误了一次而且在ce之前也de ...

  10. jumpserver安装

    一. 准备 Python3 和 Python 虚拟环境  1.1 安装依赖包 yum -y install wget sqlite-devel xz gcc automake zlib-devel o ...