Day32 - source map是什么？生产环境怎么用？

[su37josephxia]

source map 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucre map。 map文件只要不打开开发者工具，浏览器是不会加载的。 线上环境一般有三种处理方案：

hidden-source-map：借助第三方错误监控平台 Sentry 使用 nosources-source-map：只会显示具体行数以及查看源代码的错误栈。安全性比 sourcemap 高 sourcemap：通过 nginx 设置将 .map 文件只对白名单开放(公司内网)

注意：避免在生产中使用 inline- 和 eval-，因为它们会增加 bundle 体积大小，并降低整体性能。

[ruixue0702]

sourcemap 在vue的webpack配置中，如果设置为true的话，在浏览器的调试工具中就可以看到对应的源码文件，可以快速地定位问题的位置；在生产上一般将其设置为false，这样可以是项目打包后的体积更小一些。

[superjunjin]

• Source Map

  • Source Map 就是一个信息文件，里面储存着位置信息。**也就是说，Source Map 文件中存储着代码压缩混淆前后的对应关系。

  • 有了它，出错的时候，浏览器工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

• 开发环境的Source Map

  • webpack 开发环境下的 Source Map：在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码：
  • 默认Source Map 的问题：开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

• 生产环境的Source Map

  • webpack 生产环境下的Source Map：在生产环境下，如果省略了devtool 选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map 的形式暴露给别有所图之人。
  • 只定位行数不暴露源码：在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。

• Source Map 的最佳实践：

  • 开发环境下： 建议把 devtool 的值设置为 eval-source-map 好处：可以精准定位到具体的错误行。
  • 生产环境下： 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map 好处：防止源码泄露，提高网站的安全性。

[zzzz-bang]

• sourceMap是什么

  • 在前端开发过程中，通常我们编写的源代码会经过多重处理（编译、封装、压缩等），最后形成产物代码。于是在浏览器中调试产物代码时，我们往往会发现代码变得面目全非
  • 因此，我们需要一种在调试时将产物代码显示回源代码的功能，source map 就是实现这一目标的工具
  • source-map 的基本原理是，在编译处理的过程中，在生成产物代码的同时生成产物代码中被转换的部分与源代码中相应部分的映射关系表。有了这样一张完整的映射表，我们就可以通过 Chrome 控制台中的"Enable Javascript source map"来实现调试时的显示与定位源代码功能

• 生产环境如何使用

  • 在生产环境中，通常我们更关注是否需要提供线上 source map , 生成的文件大小和访问方式是否会对页面性能造成影响等，其次才是质量和构建速度。
  • 通常不会开启再次构建，因此相比再次构建，初次构建的速度更值得关注，甚至对构建速度以外因素的考虑要优先于对构建速度的考虑
  • Sourcemap 的种类有很多， 在生产环境下可以用process.env判断一下。 webpack中可以在devtool中设置, 在开发环境中可以配置devtool为cheap-module-source-map，方便调试。生产环境下建议采用none的方式，这样做不暴露源代码。或者是nosources-source-map 的方式，既可以定位源代码位置，又不暴露源代码

[qytayh]

是什么

通俗的来说， Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系，方便在浏览器中进行调试。

为什么要

JavaScript 脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。 常见的源码转换，主要是以下三种情况：

• 压缩，减小体积
• 多个文件合并，减少 HTTP 请求数
• 其他语言编译成 JavaScript

这三种情况，都使得实际运行的代码不同于开发代码，除错（ debug ）变得困难重重，所以才需要 Source Map 。结合上面的例子，即使打包过后的代码，也可以找到具体的报错位置，这使得我们 debug 代码变得轻松简单，这就是 Source Map 想要解决的问题。

常见配置

• version：顾名思义，指代了版本号，目前 source map 标准的版本为 3，也就是说这份 source map 使用的是第三版标准产出的
• file：编译后的文件名
• names：一个优化用的字段，后续会在 mappings 中用到
• sources：多个源文件名
• mappings：这是最重要的内容，表示了源代码及编译后代码的关系，但是先略过这块，下文中会详细解释

生产环境

对于生产环境，一般选择(none)（省略 devtool 选项） - 不生成 source map。

一个特殊的场景，你需要在生产环境使用到 source map —— 监控系统分析具体错误信息，这个时候一般选择 source-map——整个 source map 作为一个单独的文件生成（当然如果你不需要获取列信息，可以使用 cheap-module-source-map）。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。但需要注意的是要将你的服务器配置为，不允许普通用户访问 source map 文件！你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。

监控系统分析具体错误信息实现

大致总结下它的工作流程

• webpack 构建的时候将原始 JS 和 source map 文件都上传到我们的监控平台
• js 错误堆栈收集，通过 window.onerror 来捕获 js 报错，然后上报到服务器，以用来收集用户使用时候发生的 bug
• 解析 JS 错误，映射源文件堆栈
• 通过 sourcemap 查找原始报错信息，可以使用source-map
• 监控平台展示

[zhenyuWang]

是什么

source map 是维护了打包前后代码映射关系的 .map 文件。

作用

异常监控需要用到 source map 文件。
线上环境运行的是打包压缩后的代码，此时如果发生错误，报错信息是无法直接解读的，这个时候我们可以拿到报错信息，通过 source map 文件的映射关系解析出可以解读的错误信息，从而定位发生错误的文件及代码位置。

[zcma11]

source map 是对编译前的代码的位置信息的映射。可以让我们更清晰的查看出错位置。

生产环境为了保证代码体积，所以不会选择内嵌 source map 的模式，同时线上的代码要注意不暴露源码，可以生成没有指向源代码的 source map 或者隐藏 url 信息的 source map。也可以让后端不要部署 source map 文件。

[chunhuigao]

• Source map就是一个信息文件，里面储存着代码打包前后映射关系
• 现在代码在提交生产环境时会对代码进行合并、混淆、压缩；经过合并、混淆、压缩后的代码调试很不方便，Source map就是记录代码压缩前后映射关系的文件
• 使用webpack打包中设置nosources-source-map

[QbjGKNick]

什么是 Source map Sourcemap 是一个信息文件，里面存储这代码转换前后的对应位置信息，记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。 Source map 的作用 sourcemap 的作用就是为了让浏览器额调试面板将生成后的代码映射到源码文件当中，开发者可以在源码文件中 debug，这样可以调试更轻松和简单。

• source-map: 在外部生成一个文件，在控制台会显示 错误代码准确信息 和 源代码的错误位置
• inline-source-map: 内嵌到bundle.js中，只生成一个source-map，在控制台会显示 错误代码准确信息 和 源代码的错误位置
• hidden-source-map: 外部：错误代码错误原因，源代码的错误位置；不能追踪源代码错误，只能提示到构建后代码的错误位置
• eval-source-map： 内嵌：每一个文件都生成对应的source-map，错误代码准确信息，源代码的错误位置
• nosources-source-map: 外部：错误代码准确信息，没有任何源代码信息
• cheap-source-map: 外部：错误代码准确信息，源代码的错误位置，只能精准到行
• cheap-odule-source-map: 外部：错误代码准确信息，源代码的错误位置，module会将loader的source-map加入

[674252256]

source map 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucre map。 开发环境的Source Map webpack 开发环境下的 Source Map：在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码： 默认Source Map 的问题：开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。 生产环境的Source Map webpack 生产环境下的Source Map：在生产环境下，如果省略了devtool 选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map 的形式暴露给别有所图之人。 只定位行数不暴露源码：在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。 Source Map 的最佳实践： 开发环境下： 建议把 devtool 的值设置为 eval-source-map 好处：可以精准定位到具体的错误行。 生产环境下： 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map 好处：防止源码泄露，提高网站的安全性。

[674252256]

source map 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucre map。 开发环境的Source Map webpack 开发环境下的 Source Map：在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码： 默认Source Map 的问题：开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。 生产环境的Source Map webpack 生产环境下的Source Map：在生产环境下，如果省略了devtool 选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map 的形式暴露给别有所图之人。 只定位行数不暴露源码：在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。 Source Map 的最佳实践： 开发环境下： 建议把 devtool 的值设置为 eval-source-map 好处：可以精准定位到具体的错误行。 生产环境下： 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map 好处：防止源码泄露，提高网站的安全性。

[jj56313751]

• source map 是编译打包后的文件与源文件的映射关系的文件，方便调试
• webpack 中设置 devtool字段的值为 source-map 可以开启，打包后有文件对应的.map文件，在调试中就可以快速定位源文件

[jiafei-cat]

source map可以理解为一个地图， 通过它可以获知编译后的代码 对应编译前的代码位置。这样当代码遇到异常， 我们就可以通过报错信息定位至准确的位置。 同时在浏览器 sources 也可以查看到源码。

生产环境如何去用呢？

• 将map文件，上传到错误监控系统，例如sentry
• 选择nosources-xxx 的map文件会比其他模式的map安全性高， 因sourcemap 中不带源码， 但会有准确的错误行列信息， 避免源码泄露
• 加上map文件ip白名单 生产环境的sourcemap不要使用eval-xxx/inline-xxx，因为eval/inline不会单独生存map文件，导致js文件变大

[rachern]

source map是什么

source map是一个以 .map 结尾的信息文件，存放着转换后的代码在源码中对应的位置信息

生产环境中怎么用

生产环境中一般不会将 source map文件暴露给用户，一般在打包时生成 source map 文件，上传到服务端，然后将客户端打包生成的 source map 删除，这样可以通过服务端的 source map 定位报错信息的位置，同时不会将源码暴露给用户

[yanzefeng]

什么是 Source Map

通俗的来说, Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系，方便在浏览器中调试

生产环境怎么用

sourceMap常用的配置项

1. source-map 会⽣成map格式的⽂件，⾥⾯包含映射关系的代码

2. inline-source-map 不会⽣成map格式的⽂件，包含映射关系的代码会放在打包后⽣成的代码中

3. inline-cheap-source-map cheap有两种作⽤：⼀是将错误只定位到⾏，不定位到列。⼆是映射业务代码，不映射loader和 第三⽅库等。 会提升打包构建的速度。

4. inline-cheap-module-source-map module会映射loader和第三⽅库

5. eval ⽤eval的⽅式⽣成映射关系代码，效率和性能最佳。但是当代码复杂时，提示信息可能不精确

生产环境一般不生成 source map，如果确实要用到source map， 推荐 cheap-module-source-map

[crazyyoung1020]

sourcemap是什么 sourcemap是一个记录代码位置信息的文件，用于记录代码打包压缩前后位置的映射关系。

现代的web网页功能越来越复杂，工程越来越庞大，所以需要打包压缩，减小项目的体积，加快页面的访问速度。并且为了安全性问题，还会做代码混淆处理。那这样会导致开发人员开发调试的不变，报错无法定位到具体那一行，那一个位置。所以就需要有sourcemap这样用于记录代码转换前后位置信息的文件，让浏览器能够帮助我们定位代码具体的位置。

那刚才我们说到，代码压缩和混淆处理，主要目的有两个

• 减小项目体积，加快页面访问速度
• 提高网站的安全性，避免源码泄露

那生产上我们该如何使用，既可以方便调试，又可以保证安全性呢

1. nosources-source-map - 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。
2. 在nginx配置sourcemap文件访问权限，只有白名单才能访问，用于内部调试

[wzl624]

• 定义： sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。
• 生产环境的使用：关闭 Source Map 或将 devtool 的值设置为 nosources-source-map，关闭可以防止源码泄露，而devtool设置成nosources-source-map可以只定位行数不暴露源码

[guoshukun1994]

source map是什么？

source map是构建前的源代码和构建后的代码之间的映射，由于线上环境的代码多是压缩过的，我们在浏览器中难以调试，所以可以通过开启source map来查看相关源代码。

生成环境怎么用？

一般可以通过设置nosources-source-map只会显示源代码的行数及错误调用栈，安全性比source高，尽量不用用inline-source-map，它会增加bundle的体积，影响性能，构建后的map产物如bundle.js.map