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

【问题标题】：How to detect features and lazy-load only the needed polyfills with babel / core-js?如何使用 babel / core-js 检测功能并仅延迟加载所需的 polyfill？
【发布时间】：2019-10-06 20:43:08
【问题描述】：

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

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

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

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

【问题讨论】：

标签： lazy-loading babeljs feature-detection polyfills core-js

【解决方案1】：

像 polyfill.io 这样的服务会根据预定义的集合调查您的 User Agent，并在此基础上为您提供不同的 polyfill 包。您尝试做的实际上是完全不同的。

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

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

【讨论】：