一 、 从Sourcemap和Data URL说起

(1)什么是Sourcemap?

我们在打包中,将开发环境中源代码经过压缩,去空格,babel编译转化,最终可以得到适用于生产环境的项目代码,这样处理后的项目代码和源代码之间差异性很大,会造成无法debug的问题。

举例来说,如果压缩等处理过的生产环境中的代码出现bug,调试的时候只能定位到压缩处理后的代码的位置,无法定位到开发环境中的源代码。

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

I)压缩,减小体积

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

III)其他语言编译成javascript,比如TypeScript和CoffeeScript等

(2)什么是DataURL?

DataURL最早是出现在HTML文件img标签中的关于图片的引用,DataURL提供了一种将图片”嵌入”到HTML中的方法。

转  :  https://blog.csdn.net/liwusen/article/details/79414508

http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

Webpack中的sourcemap以及如何在生产和开发环境中合理的设置的更多相关文章

  1. Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

  2. webpack项目在开发环境中使用静态css文件

    webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...

  3. 将linux用在开发环境中

    我是如何将linux用在开发环境中的 1.为什么不直接安装Linux在主机 一直想深入学习一下linux的使用,于是将家里的笔记本装了linux系统,但是要将自己的系统打造一个适合开发的环境确实是一件 ...

  4. 如何将linux用在开发环境中的

    如何将linux用在开发环境中的 1.我为什么要写这篇文章 一直想深入学习一下linux的使用,于是将家里的笔记本装了linux系统,但是要将自己的系统打造一个适合开发的环境确实是一件费心费力的事,而 ...

  5. UEditor在开发环境中正常运作,但是部署到Tomcat中却无法使用

    背景 ​ SpringBoot项目,在 JSP 中使用 UEditor 问题 ​ UEditor 在开发环境中正常运作,但是导致部署到 Tomcat 中却无法使用 原因 在开发环境中,路径不够严谨,多 ...

  6. Vue-cli3.x在开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chunk {/d} failed.或者Uncaught SyntaxError: Unexpected token <错误

    使用Vue-cli3.x开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chu ...

  7. 关于vue项目中axios跨域的解决方法(开发环境)

    1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...

  8. Idea开发环境中搭建Maven并且使用Maven打包部署程序

    1.配置Maven的环境变量 a.首先我们去maven官网下载Maven程序,解压到安装目录,如图所示: b.配置M2_HOME的环境变量,然后将该变量添加到Path中 备注:必须要有JAVA_HOM ...

  9. 开发环境中biztalk项目设置注意事项(转)

      适用版本:biztalk 2006 适用环境:开发测试环境 在开发过程中,在开发环境中,一定会是一个对项目不断的修改.编译.部署.测试,查看测试结果,发现有问题,然后回到开发环境再修改.编译.部署 ...

随机推荐

  1. 50个Sql语句实战

    /* 说明:以下五十个语句都按照测试数据进行过测试,最好每次只单独运行一个语句. 问题及描述:--1.学生表Student(S#,Sname,Sage,Ssex) --S# 学生编号,Sname 学生 ...

  2. Elasticsearch ES索引

    ES是一个基于RESTful web接口并且构建在Apache Lucene之上的开源分布式搜索引擎. 同时ES还是一个分布式文档数据库,其中每个字段均可被索引,而且每个字段的数据均可被搜索,能够横向 ...

  3. Linux建立虚拟ip的方法

    文章来源 运维公会:Linux建立虚拟ip的方法   1.虚拟ip的介绍 虚拟IP地址(VIP) 是一个不与特定计算机或一个计算机中的网络接口卡(NIC)相连的IP地址.数据包被发送到这个VIP地址, ...

  4. SUSE Ceph RBD Mirror - Storage 6

    Ceph采用的是强一致性同步模型,所有副本都必须完成写操作才算一次写入成功,这就导致不能很好地支持跨域部署,因为如果副本在异地,网络延迟就会很大,拖垮整个集群的写性能.因此,Ceph集群很少有跨域部署 ...

  5. Jenkins手把手图文教程[基于Jenkins 2.164.1]

    原文:http://www.itmuch.com/work/jenkins-in-action/ 一.下载 前往https://jenkins.io/download/ ,按需下载.如用于生产,建议下 ...

  6. 个性化召回算法实践(五)——item2vec

    item2vec将用户的行为序列转化成item组成的句子,模仿word2vec训练word embedding将item embedding.基本思想是把原来高维稀疏的表示方式(one_hot)映射到 ...

  7. P2085 最小函数值[优先队列]

    题目描述 有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个(如有重复的要输出多个 ...

  8. 《3+1团队》第七次作业:团队项目设计完善&编码

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 3+1团队 团队博客地址 https://home.cnblogs.com/u/3-1group ...

  9. puppeteer报错 UnhandledPromiseRejectionWarning: Error: Protocol error (Page.getLayoutMetrics): Target closed.

    puppeteer运行时报错: UnhandledPromiseRejectionWarning: Error: Protocol error (Page.getLayoutMetrics): Tar ...

  10. Python基本的语法知识

    1. 编程语言的介绍 低级语言:机器语言--------计算机内部只能接受二进制代码,故用0或者1表示的指令称为机器指令,全部的机器指令构成了计算机的机器语言. 汇编语言--------实质上跟机器语 ...