source-map整理

CoreDump 发布于2019-08-20 16:31 / 2135人阅读

摘要：这个就是把的换成了完整信息的形式特点结合了和的特点，将每个模块包起来，并且最后添加的信息，可以知道行列，可以为模块缓存它可以更快的重建。最终的只有一份，它是对生成的进行简化，然后再次生成的。

eval

每个 module 会通过 eval() 来执行，并在后面添加 //# 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?"
    )
  },
...])

特点：

eval有最好的性能，但是它只映射到每个模块源码文件，没有行列信息。

source-map

打包代码同时创建一个新的 sourcemap 文件，并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿

形式：

webpackJsonp([1],[
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  ...
])
//# sourceMappingURL=index.js.map

特点：

source-map 不能为模块和需要重新生成的代码块缓存SourceMaps，它适用于生产环境。

inline-source-map

为每一个文件添加 sourcemap 的 DataUrl，注意这里的文件是打包前的每一个文件而不是最后打包出来的，同时这个 DataUrl 是包含一个文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一个 url

形式：

webpackJsonp([1],[
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  ...
])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9...

特点：

可以看到末尾的注释 sourceMap 作为 DataURL 的形式被内嵌进了 bundle 中，由于 sourceMap 的所有信息都被加到了 bundle 中，整个 bundle 文件变得硕大无比。

eval-source-map

这个就是把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrl

形式：

webpackJsonp([1],[
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
    )
  },
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
    )
  },  
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
    )
  },
  ...
]);

特点：

结合了eval和source-map的特点，eval将每个模块包起来，并且最后添加source-map的base64信息，可以知道行列，可以为模块缓存它可以更快的重建SourceMaps。

cheap-source-map

不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）

特点：

不包含行信息，会减小map大小，不支持loader的sourcemap，比如从jsx映射到js，最终你只能访问到js文件，看不了源码的jsx文件。

cheap-module-source-map

不包含列信息，同时 loader 的 sourcemap 也被简化为只包含对应行的。最终的 sourcemap 只有一份，它是 webpack 对 loader 生成的 sourcemap 进行简化，然后再次生成的。

特点：

相较于cheap-source-map，可以支持loader的sourcemap

hidden-source-map

和 source-map 一样，但不会在 bundle 末尾追加注释.

形式：

webpackJsonp([1],[
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  ...
])

特点：

与 source-map 相比少了末尾的注释，但 output 目录下的 index.js.map 没有少

注1：webpack 不仅支持这 7 种，而且它们还是可以任意组合上面的 eval、inline、hidden 关键字，就如文档所说，你可以设置 souremap 选项为 cheap-module-inline-source-map。

注2：如果你的 modules 里面已经包含了 SourceMaps ，你需要用 source-map-loader来和合并生成一个新的 SourceMaps

调试

github上关于调试的问题：Source Maps don"t work on Chrome

个人实测：

chrome里能否调试源码 x：不行 o：可以

eval-source-map x(刷新断点被忽略)

cheap-source-map x(不是源码)

cheap-module-eval-source-map x(刷新断点被忽略)

cheap-module-source-map x(断点位置不对)

source-map o

inline-source-map o

总结

eval：更快

inline：内联

cheap：不含列信息，不支持loader sourcemap（譬如 babel 的 sourcemap，从jsx到js的映射）

cheap-module：不含列信息，支持loader sourcemap

source-map：包含行列信息，支持loader sourcemap

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82975.html

React结合webpack的具体使用

摘要：结合的具体使用我们一般是使用进行安装的，这里我为大家推荐一款淘宝出的，这个和差不多，但是比安装的要快很多安装命令搭建环境初始化一个文件安装全局安装局部安装安装来把格式的代码编译成安装来转译代码安装转移的插件， React结合webpack的具体使用我们一般是使用npm进行安装的，这里我为大家推荐一款淘宝出的cnpm，这个和npm差不多，但是比npm安装的要快很多；安装命令 npm ...

enrecul101 2019-08-20 18:19 评论0 收藏0
React结合webpack的具体使用

摘要：结合的具体使用我们一般是使用进行安装的，这里我为大家推荐一款淘宝出的，这个和差不多，但是比安装的要快很多安装命令搭建环境初始化一个文件安装全局安装局部安装安装来把格式的代码编译成安装来转译代码安装转移的插件， React结合webpack的具体使用我们一般是使用npm进行安装的，这里我为大家推荐一款淘宝出的cnpm，这个和npm差不多，但是比npm安装的要快很多；安装命令 npm ...

LeexMuller 2019-08-29 13:01 评论0 收藏0
React结合webpack的具体使用

摘要：结合的具体使用我们一般是使用进行安装的，这里我为大家推荐一款淘宝出的，这个和差不多，但是比安装的要快很多安装命令搭建环境初始化一个文件安装全局安装局部安装安装来把格式的代码编译成安装来转译代码安装转移的插件， React结合webpack的具体使用我们一般是使用npm进行安装的，这里我为大家推荐一款淘宝出的cnpm，这个和npm差不多，但是比npm安装的要快很多；安装命令 npm ...

Leck1e 2019-08-01 17:15 评论0 收藏0
vue + webpack +chrome 调试

摘要：最近整理一下针对的调试方法。一是的调试的插件，可以直接显示组件现在的状态。最终的只有一份，它是对生成的进行简化，然后再次生成的。关于的标记是不起作用的需要手动加入命令问题描述 vue 经过webpack的打包压缩之后，通过source看到的代码已经面目全非，无法轻易对代码进行调试。最近整理一下针对vue的调试方法。一、 devtools devtools是Chrome的调试vue的...

BWrong 2019-08-23 12:49 评论0 收藏0
细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息

摘要：文件就是记录了从源代码文件到压缩文件的一个代码对应关系记录表，通过压缩文件和文件可以原原本本找出源代码文件。细说 js 压缩、sourcemap、通过 sourcemap 查找原始报错信息 1. js 压缩 js 压缩对前端开发者来说是一门必修课。一般来说，压缩 js 主要出于以下两个目的：减小代码体积，加快前端资源加载速度保护源代码不被别人获取压缩 js 使用的工具库：...

douzifly 2019-08-23 13:07 评论0 收藏0