一、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. June 15. 2018 Week 24th Friday

    If at first you don't succeed, then dust yourself off and try again. 失败了没关系,重振旗鼓,从头再来. From Aaliyah, ...

  2. java操作elasticsearch实现查询删除和查询所有

    后期博客本人都只给出代码,具体的说明在代码中也有注释. 1.查询删除 //查询删除:将查询到的数据进行删除 @Test public void test8() throws UnknownHostEx ...

  3. js原生动态创建表格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 清除float浮动造成影响的几种解决方案

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  5. SpringMVC-DispatcherServlet工作流程及web.xml配置

    工作流程: Web中,无非是请求和响应: 在SpringMVC中,请求的第一站是DispatcherServlet,充当前端控制器角色: DispatcherServlet会查询一个或多个处理器映射( ...

  6. NOsql总结

    NOsql总结 1.存储: 任意格式的数据:值对存储,列存储,文档存储,图形数据库 灵活的表结构支持:类型动态.scheme动态: 灵活的存储形式:列存储: 弱关系:NoSQL数据库种类繁多,但是一个 ...

  7. sqlserver 2000数据压缩解决方法

    --sqlserver 2000数据压缩解决方法. /************************************************************************* ...

  8. Python字符串 u"string",r"string"的写法含义

    1.字符串前加 u = unicode编码 例:u"我是含有中文字符组成的字符串." 作用:后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格 ...

  9. flask上传excel文件，无须存储，直接读取内容

    运行环境python3.6 import xlrd from flask import Flask, request app = Flask(__name__) @app.route("/& ...

  10. 在linux中查看进程占用的端口号

    在Linux 上的 /etc/services 文件可以查看到更多关于保留端口的信息. 可以使用以下六种方法查看端口信息. ss:可以用于转储套接字统计信息. netstat:可以显示打开的套接字列表 ...