面试题：Webpack Source Map类型对构建性能与调试体验的影响

Question

在Webpack项目中，不同的Source Map类型会对构建性能和调试体验产生不同影响。请详细阐述eval - source - map、cheap - module - source - map等类型在构建速度、生成文件大小以及调试时定位错误准确性方面的特点，并说明如何根据项目需求来选择合适的类型。

Answer 1

eval - source - map

• 构建速度：构建速度相对较快。因为它使用 eval 来包裹模块代码，并在 eval 中添加一个 //# sourceMappingURL 注释指向一个单独的 source map 文件。eval 执行效率较高，所以整体构建速度快。
• 生成文件大小：生成的文件相对较大。虽然代码是通过 eval 执行，但由于需要额外的 source map 文件，所以总体占用空间会增加。
• 调试定位错误准确性：调试时定位错误准确性高。它能够准确地映射到原始的源代码位置，包括行号和列号，方便开发人员快速定位问题。

cheap - module - source - map

• 构建速度：构建速度较快。它在生成 source map 时只会包含行信息，不包含列信息，减少了生成 source map 的开销，从而加快构建速度。
• 生成文件大小：生成的文件相对较小。相比包含行列信息的 source map，只包含行信息的文件大小会小很多。
• 调试定位错误准确性：调试定位错误准确性相对较低。只能定位到错误所在的行，无法精确到列，对于一些复杂的错误定位可能不够精准。

选择合适的类型

• 开发环境：
  • 如果注重开发体验，希望在调试时能快速准确地定位错误，建议选择 eval - source - map。虽然生成文件较大，但构建速度快，且调试准确性高，能提高开发效率。
  • 如果项目对构建速度要求极高，且对错误定位精度要求不是特别高（比如一些简单项目或者对列信息不敏感的项目），可以选择 cheap - module - source - map。它能在保证一定调试功能的同时，加快构建速度。
• 生产环境：
  • 一般不建议使用 eval - source - map，因为生成文件大，会增加用户加载成本。
  • 可以选择 cheap - module - source - map，既能提供一定的错误定位功能，文件大小又相对较小。或者如果对文件大小要求极为苛刻，甚至可以不使用 source map（但这样调试生产环境错误会很困难）。