跳到主要内容

知道sourceMap是什么吗？

  • sourceMap是一项将编译、打包、压缩后的代码映射回源代码的技术，由于上线代码经过打包压缩并没有阅读性可言，一旦在开发中报错或者遇到问题，直接在混淆代码中debug问题会带来非常糟糕的体验，sourceMap可以帮助我们快速定位到源代码的位置，提高我们的开发效率

  • 源代码与打包后的代码的映射关系

    (一个js文件或css文件产生对应的映射.nap文件)

    • 启动sourceMap的好处就是开发时候，当我们代码发生错误的时候，会帮我们指向哪个文件哪一行发生错误，因此做调试的时候很方便

    • 在dev模式中，默认开启，关闭的话 可以在配置文件里

如何在调试使用sourceMap​

为了减少请求数和文件下载体积，保证页面以最快的时间载入，线上文件的代码都是经过打包工具合并压缩过的。甚至有的时候，为了防止不法分子或者竞争对手来反编译你的源码，我们会进一步对代码进行混淆或者加密

  • 对于一些混淆的、可读性差的代码，问题的定位还是有点麻烦的, 借助 SourceMap 功能可以快速定位问题

sourceMap文件应该存放哪里?

  • 可以放在远程服务器，也可以存放本地

如何使用

  • chrome浏览器必须开启相关设置

    • Setting -> Preferences-Sources -> 勾选Enable JavaScript source maps -> 勾选Enable CSS source maps

    • 开启了这些选项，则 map 文件会随页面一起下载

sourceMap 文件是否影响网页性能？​

这个答案肯定是不会影响，否则构建相关的优化就肯定会涉及到对于 source map 的处理了，毕竟 source map 文件也不小。

其实 source map 只有在打开 dev tools【开发者工具】 的情况下才会开始下载，相信大部分用户都不会去打开这个面板，所以这也就不是问题了。

这时可能会有读者想说：哎，但是我好像从来没有在 Network 里看到 source map 文件的加载呀？其实这只是浏览器隐藏了而已，如果大家使用抓包工具的话就能发现在打开 dev tools 的时候开始下载 source map 了。

sourceMap 的应用​

sourceMap文档：

  • 一般来说 source map 的应用都是在监控系统中，开发者构建完应用后，通过插件将源代码及 source map 上传至平台中。一旦客户端上报错误后，方便开发者快速定位线上问题。

Chrome如何添加sourceMap文件​

  • 在 Chrome DevTools 【开发者工具中】的 Sources 中选择需要添加 SourceMap 的文件

  • 在右侧文件窗口中右键并选择 Add source map...

  • 在弹出的输入框 Source map URL 中写入

    • 通过file协议选择本地的map文件,先在浏览器地址栏中输入确保可以访问到。

  • 添加完sourceMap文件之后，在调试的时候，就会发现映射到源码了

webpack如何配置sourceMap​

  • 在devtool配置
js
module.exports = {
  devtool: 'source-map', // 启用 source map
};

devtool配置：

  • source-map 模式下会输出质量最高最详细的 Source Map，这会造成构建速度缓慢，特别是在开发过程需要频繁修改的时候会增加等待时间
  • 在开发环境下把 devtool 设置成 cheap-module-eval-source-map，因为生成这种 Source Map 的速度最快，能加速构建。由于在开发环境下不会做代码压缩，Source Map 中即使没有列信息也不会影响断点调试
  • 不要在生产环境下使用 inline 模式的 Source Map， 因为这会使 JavaScript 文件变得很大，而且会泄露源码
  • 在生产环境下把 devtool 设置成 hidden-source-map，意思是生成最详细的 Source Map，但不会把 Source Map 暴露出去
devtool 配置选项描述与使用场景
eval使用 eval 执行每个模块，并且在同一个文件中生成源映射。适用于开发环境，速度最快，但映射较简单。
inline-source-map将源映射包含在生成的文件中，而不是单独生成一个源映射文件。适用于开发环境，方便调试，但会增加生成文件的大小。
cheap-eval-source-map类似于 eval，但在每行代码末尾追加注释，生成比较简单的源映射。适用于开发环境。
cheap-module-eval-source-map在 cheap-eval-source-map 的基础上，将 loader 的 source map 添加到 source map 中。适用于开发环境。
eval-source-map在每行代码末尾生成完整的源映射，但仍使用 eval 执行模块。适用于开发环境。
cheap-source-map类似于 cheap-eval-source-map，但使用文件生成源映射，适用于开发环境，速度相对较慢。
cheap-module-source-map在 cheap-source-map 的基础上，将 loader 的 source map 添加到 source map 中。适用于开发环境。
source-map在单独的文件中生成完整的源映射，适用于生产环境。
hidden-source-map类似于 source-map，但不会在源代码中添加注释。适用于生产环境。
nosources-source-map生成一个完整的源映射，但不包含源代码。适用于生产环境，用于隐藏源代码。