如何使用Babel / core-js检测功能并仅延迟加载所需的polyfills？

Question

Polyfill服务如polyfill.io似乎只向浏览器传递小的特性检测，然后仅延迟加载实际需要的polyfills。

据我所知，关于polyfill的babel文档，Babel总是包含可能需要的全部polyfills：它将处理一个，然后包括最弱的浏览器需要的那些来自core-js的polyfills。像webpack这样的打包工具可能会将所有这些polyfills合并到应用程序中，但没有运行时特性检测。

我的应用程序使用现代ES语言功能，但也针对广泛的浏览器，包括IE10和IE11。这需要大量的polyfills，并且可能会使捆绑文件变得臃肿，特别是对于可能不需要大部分polyfills的现代浏览器而言。

因此，我在想：我可以告诉Babel和/或Webpack仅包括特性检测，将polyfills拆分成单独的块（个别或小型捆绑包），然后在运行时仅“懒”加载实际需要的内容吗？

- John Goofy

Answer 1

像polyfill.io这样的服务会根据预定义的一组参数来检查您的，并基于此为您提供不同的polyfills包。而您要做的实际上完全不同。

我能想到的一个解决方案是在构建中引入代码分割（在Webpack 4生产版本中默认开启），并在项目中创建几个文件，其中每个文件都将导入不同的polyfills集合。这将要求您手动导入polyfills，但可以让您拥有多个polyfill块，每个块具有不同的缺失功能子集。在获得这些块之后，您可以在应用程序启动时使用一些功能检测（可能是Modernizr），并动态加载仅由浏览器需要的那些块。请记住，这个过程相当繁琐 - 您需要手动处理每个polyfill的包含。还有另一个缺点是，它将需要向服务器发出几个请求，这将进一步减慢您的应用程序启动时间。

至于问题的其他部分 - webpack / babel不会为您自动拆分polyfill块和运行时特性检查，这些必须手动处理。

- rafal2228