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

问题描述 投票:6回答:1

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个回答
0
投票

诸如polyfill.io之类的服务会针对预定义的集合调查User Agent,并根据该集合为您提供不同的polyfill捆绑包。实际上,您要尝试做的事情与众不同。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.