@vitejs/plugin-legacy中polyfills与modernPolyfills的区别解析

目标浏览器与处理范围差异 #

• polyfills：针对你配置的全部目标浏览器（含旧浏览器）注入兼容补丁，但默认只处理你的业务代码，不会覆盖node_modules里的依赖包。它会根据设定的浏览器兼容范围全量注入所需补丁，哪怕浏览器原生支持部分API也会统一添加。你之前的问题就出在这——更新后的依赖直接用了Object.hasOwn，但polyfills没处理依赖里的代码，旧浏览器自然找不到这个API。
• modernPolyfills：专为兼顾现代浏览器性能与旧浏览器兼容设计，会扫描**整个代码库（包括依赖）**中用到的现代API，给不支持这些API的旧浏览器精准注入对应补丁，现代浏览器则不会添加冗余代码。它能补上依赖包中未做兼容的现代API缺口。

注入逻辑差异 #

• polyfills：默认是全量注入模式（除非手动配置useBuiltIns: 'usage'），不管代码里有没有用到某个API，只要目标浏览器需要就会添加，且仅作用于业务代码。
• modernPolyfills：采用按需检测注入，只针对代码（含依赖）实际用到的、旧浏览器缺失的API添加补丁，避免冗余代码，同时自动处理依赖的兼容问题。

适用场景差异 #

• 当依赖包本身已做好旧浏览器兼容，仅需给业务代码补兼容时，用polyfills即可。
• 当依赖包使用了现代API却未做兼容，且需要同时保证现代浏览器性能和旧浏览器正常运行时，必须用modernPolyfills——这也是你这次问题的解决方案。

内容的提问来源于stack exchange，提问作者Damascus