用eval动态调用方法为什么在打包部署的时候没有了呢？

最新推荐文章于 2024-09-15 18:30:00 发布

xianyudx

最新推荐文章于 2024-09-15 18:30:00 发布

阅读量713

点赞数 9

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/xianyu199901/article/details/135623400

版权

本文讨论了eval的性能问题和安全风险，建议避免使用。对于Webpack项目，可通过sideEffects解决动态调用的treeshaking问题；而Vite项目则需借助Map集合来管理动态函数调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

并不推荐使用eval，这个会拖慢浏览器的优化，并且可能产生未知的错误。相关文章可见：永远不要使用 eval！–mdn
主要是老项目中的陈年代码，能够稳定运行，只是尝试修改。

检查

检查下配置文件中是否启用了tree shaking，动态调用的代码是否在其他的代码中引用过呢？
如果启用了tree shaking，并且动态调用的代码没有在其他地方引用过，那很有可能是被tree shaking掉了。
如果真的想要检查下，可以去产物代码中扒拉扒拉，以动态调用的方法名进行搜索，大概率是没有的。

解决方法

Webpack

可以通过设置sideEffect来解决相应问题，以这篇文章为例：webpack Tree Shaking 之 sideEffects

Vite

像我们是新项目，用的是vite，打包其实是用的Rollup，通过在 github 上挖呀挖呀挖，发现 Rollup 并没有像Webpack中 sideEffect 的设置，并且Rollup也不推荐在代码中使用eval。
所以，最后我们通过设置一个Map集合，将相应动态调用的方法放入Map中，从Map调用。
代码示例如下：

const fn1 = () = {};
const map = new Map([
['fn1', fn1]
]);
// name是动态的
const dynamicFuncName = 'fn' + name;
if (map.has(dynamicFuncName)) {
	const func = map.get(dynamicFuncName);
	func();
}