IT序号网

动态Polyfill知识解答

xmjava 2021年05月25日 编程语言 154 0

Polyfill

我们希望浏览器提供一些特性,但是没有,然后我们自己写一段代码来实现他,那这段代码就是补丁。

一般处理方式:babel-polyfill.js

引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.js"></script>
然后就 es6、es7 特性随便写了,但缺点是,babel-polyfill 包含所有补丁,不管浏览器是否支持,也不管你的项目是否有用到,都全量引了

动态补丁polyfill.io

在需要补丁的浏览器会加载补丁代码,不需要补丁的浏览器不会加载代码,比如:

<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise%2CArray.prototype.includes"></script>
 

然后在 Chrome@71 下的输出是:

 
/* Disable minification (remove `.min` from URL path) for more info */

啥都没有,因为 Promsie 特性 Chrome@71 已经支持了。

阿里也搭了个服务,可以考虑引用阿里的

<script src="https://polyfill.alicdn.com/polyfill.min.js?features=Promise%2CArray.prototype.includes"></script>




发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

requestIdleCallback和requestAnimationFrame详解知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。