跳到主要内容

devtool

一、认识​

Source Map 是一种将压缩、混淆、转换后的代码与原始源代码（如 TypeScript、Sass 或 ES6）进行映射的技术。它允许开发者在浏览器调试时查看原始源代码，而不仅仅是打包后的代码，这对于调试、性能优化等都非常重要。

Webpack 提供了多种生成 Source Map 的策略（通过 devtool 配置项），不同的策略在开发环境和生产环境中有不同的用途和性能影响。了解每种策略的特点，可以帮助你在不同的环境中选择最合适的配置。

devtool 配置项用于指定 Webpack 生成 Source Map 的策略。

二、语法​

devtool : false | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

devtool: false

devtool: : [一级 可省略]-[二级 可省略]-[三级 可省略]-[四级 可省略]-source-map

  • [inline-|hidden-|eval-]: 第一级, 这些配置项决定了 Source Map 如何嵌入到生成的 JavaScript 文件中。

    • inline: 将整个 Source Map 以内联数据的形式嵌入到最终的 JavaScript 文件中。生成的 JavaScript 文件会变得更大，因为 Source Map 直接嵌入其中。不会生成独立的 .map 文件，所有信息都包含在 .js 文件中。调试时非常方便，直接可以在浏览器开发工具中看到原始源代码。同时, 会有完整的行和列映射。构建速度较快，但生成的文件较大。

    • hidden-: 生成 Source Map 文件，但是不会将其暴露给浏览器，无法在浏览器中查看源代码。生成 .map 文件，但不会在浏览器的开发者工具中暴露源代码。适用于生产环境，在生产环境中用于错误追踪，保留 Source Map 供开发者调试，但不暴露给用户。会有完整的行和列映射。生成 .map 文件的速度和 source-map 类似。

    • eval-: 使用 eval() 包裹每个模块，并生成嵌入式的 Source Map。每个模块使用 eval() 执行，并且将 Source Map 嵌入每个模块。适用于开发环境，构建速度非常快，但调试时可能会影响代码的精度（缺少准确的行列信息）。生成的 .map 文件较小，且与源代码直接相关。会提供行级映射，但由于使用 eval()，无法提供列级映射。非常快，因为 eval 是一种高效的 JavaScript 执行方式。

  • [nosources-]: 第二级, 这个选项决定了 Source Map 是否包含源代码。如果使用了 nosources-，它将不包括源代码，只保留映射信息。通常用于生产环境，保护源代码。适用于生产环境，在生成的 Source Map 中不包含原始源代码，只保留映射信息。保护了源代码的隐私。包含完整的行和列映射，但没有源代码。生成 Source Map 的速度与 source-map 相似。

  • [cheap-]: 第三级, 这个选项决定了 Source Map 的精度，cheap 会减少映射信息的精度，通常丢失列信息，只保留行信息。Source Map 精度较低，只能映射到行级，无法提供精确到列的映射。生成的 .map 文件较小，构建速度较快。非常快，适用于需要快速构建的开发环境。

  • [module-]: 第四级, 这个选项与模块加载器（如 Babel 或 TypeScript）配合使用，决定了 Source Map 是否支持模块级别的映射。当你的代码经过模块加载器（如 Babel、TypeScript）处理时，使用 module- 可以保留每个模块的 Source Map，提供更细粒度的调试信息。提供行级和列级映射，适用于包含模块化转换的代码。

  • source-map: 第五级, 这个是最精确、最全面的 Source Map 类型，生成完整的映射信息，适用于生产环境中需要调试源码的场景。生成独立的 .map 文件，包含完整的映射信息，包括行和列的精确映射。最精确的 Source Map 类型，生成完整的源代码映射信息，适合需要生产环境调试或错误追踪的场景。

三、策略​

3.1 source-map​

3.2 eval-source-map​

3.3 cheap-source-map​

3.4 inline-source-map​

3.3 eval-cheap-source-map​

3.5 inline-cheap-source-map​

3.4 eval-cheap-module-source-map​

3.10 inline-cheap-module-source-map​

四、最佳实践​

4.1 开发环境​

module-source-map 或者 cheap-module-source-map: 生成单独的 .map 文件, 且保留每个模块转换后的 Source Map。我们的项目会经过 Typescript、SWC、Babel 转换, 所有，选择 Module 非常合适, 另外如果想稍微加快构建速度，可以接受没有列映射，可以前面加一个 cheap。cheap 的来源是，它不保留完整的映射信息，只保留行信息，这使得构建速度更快，文件大小更小，但调试的精度稍低。

4.3 生产环境​

source-map：适用于生产环境，提供完整的映射信息，帮助进行错误追踪, 提供最好的调试支持。 source-map 会生成一个完整的 .map 文件, 会将其上传到 Sentry 等监控平台, 仅供监控平台使用。注意: 你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。