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

Question

像polyfill.io这样的 Polyfill 服务似乎只向浏览器提供小功能检测，然后只延迟加载实际需要的 polyfill。

据我了解关于 polyfilling的babel 文档，babel 总是包含全套可能需要的 polyfill：它会处理 a browserslist，然后包含最弱浏览器需要的 core-js 中的那些 polyfill。像 webpack 这样的打包器可能会将所有这些 polyfill 合并到应用程序中，但不会检测到运行时功能。

我的应用程序使用现代 ES 语言功能，但也针对各种浏览器，包括 IE10 和 IE11。这需要大量的 polyfill，并且可能会使包膨胀，尤其是对于可能不需要大部分 polyfill 的现代浏览器。

所以我想知道：我可以告诉 babel 和/或 webpack 只包含功能检测，将 polyfill 分成单独的块（单独或分成小包），然后在运行时，只“懒惰”加载实际上是什么需要吗？

Answer 1

像 polyfill.io 这样的服务会User Agent根据预定义的集合来调查您的情况，并据此为您提供不同的 polyfill 包。你想要做的事情实际上是完全不同的。

我可以想到的一个解决方案是在您的构建中引入代码拆分（在 Webpack 4 生产构建中默认启用）并在项目中创建多个文件，其中每个文件都会导入一组不同的 polyfill。这将要求您手动导入 polyfill，但允许您拥有多个 polyfill 块，每个块都有不同的缺失功能子集。获得这些块后，您可以在应用程序启动时使用一些功能检测（可能是Modernizr），并仅动态加载浏览器所需的那些块。请记住，这个过程相当麻烦 - 您需要手动包含每个填充。它的另一个缺点是，它需要向服务器发出多个请求，这会额外减慢应用程序的启动时间。

至于你的问题的其他部分 - webpack/babel 不会为你做自动填充块分割和运行时功能检查，这些需要手动处理。