webpack devtool为什么用eval()?

Question

github issue提到source-map会跟踪每一行源代码，再对最终整个chunk生成source-map，而eval不会跟踪代码，只将模块源代码转为string。

但是不用eval直接把代码放上去也可以吧？实在不理解eval的优势在哪里

Answer 1

看了webpack源码，主要是EvalDevToolModuleTemplatePlugin、EvalSourceMapDevToolModuleTemplatePlugin和SourceMapDevToolPlugin这三个文件

• eval模式使用Weekmap来缓存"eval(content + sourceURL)"整个字符串，每个eval包裹的是一个模块的js代码和sourceURL，该模式不需要生成sourceMap，只需要用sourceURL来指定原文件名，每次只会对更新的模块生成这些内容。
• eval-source-map模式在eval模式的基础上对模块计算了sourceMap，一起缓存"eval(content + DataURL + sourceURL)"，也是只对更新的模块计算和生成eval
• 而source-map模式是将整个chunk重新构建与生成sourceMap，自然会慢很多

Answer 2

使用eval的好处是可以更快地生成源映射，并且可以更轻松地将源映射与原始代码进行匹配，这有助于提高调试体验和减少源映射文件的大小。此外，由于源映射是直接嵌入JavaScript代码中的，因此可以更轻松地与Webpack Dev Server一起使用，以提供实时重新加载功能。