为什么Webpack生成JavaScript代码要引入eval模式

Question

最近在看Webpack的生成的JavaScript，有一个疑问想不明白：为什么Webpack要提供eval的模式，将模块的generated code用eval来包裹？

这里的讨论不仅限于devtool是eval，还包括eval-source-map, cheap-eval-source-map等各种包含了eval的衍生组合。如果说eval的好处是build速度快，因为它不生成source map，那类似于eval-source-map这样的呢？

所以我的疑问并不在于source map，而是eval本身。既然它如此被诟病，为什么Webpack还是要引入这样一种代码生成机制，它究竟有什么好处？

Answer 1

goto也被诟病，但你仍然可以在C/C++中使用goto。

真正被诟病的不是eval，而且eval的滥用。如果你确认拿到的代码是你自己的（或任何你信任的），用eval是完全可以接受的，而且可以享受到速度快的好处。

Answer 2

赞同代码宇宙的答案，js还有一个不建议使用的关键词是with，但是vue源码中模板渲染那里就有用with，这样确实让代码看起来更简单，更清晰。eval也是同理，避免滥用，但是你可以确定的地方使用会有更方便的体验。

Answer 3

看了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，自然会慢很多