lazy-loading - 如何使用babel/core-js检测特征并仅延迟加载所需的polyfill？

Question

诸如polyfill.io之类的Polyfill服务似乎只向浏览器提供了小的功能检测，然后仅延迟加载实际需要的polyfill。

据我所知babel documentation on polyfilling，babel始终包括潜在需要的全套polyfill:它将处理browserslist，然后包括最弱的浏览器所需的core-js的polyfill。然后，像webpack这样的捆绑程序可能会将所有这些polyfill合并到应用程序中，但没有运行时功能检测到。

我的应用程序使用了现代ES语言功能，但同时也针对包括IE10和IE11在内的各种浏览器。这需要大量的polyfill，并且可能会使捆绑包膨胀，尤其是对于可能不需要大多数polyfill的现代浏览器而言。

所以我想知道:我可以告诉babel和/或webpack仅包括功能检测，将polyfill分成单独的块(单独或分成小束)，然后在运行时仅“延迟”加载实际的内容吗？需要吗？

Answer 1

诸如polyfill.io之类的服务会根据预定义的集合对User Agent进行调查，并根据该集合为您提供不同的polyfill捆绑包。实际上，您要尝试做的是完全不同的。

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

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