说明
玩转 webpack 学习笔记
babel-polyfill 打包后体积占比大
babel-polyfill 打包后体积：88.49k，占比 29.6%
Promise 的浏览器支持情况
比如：promise 可以打开网址https://caniuse.com/查看
构建体积优化：动态 Polyfill
方案 | 优点 | 缺点 | 是否采用 |
babel-polyfill | React 16 官方推荐 | 1、包体积200k+，难以单独抽离Map、Set。2、项目里 react 是单独引用的 cdn，如果要用它需要单独构建一份放 react 前加载 | ❌ |
babel-plugin-transform-runtime | 能只 polyfilI 用到的类或方法，相对体积较小 | 不能 polyfill 原型上的方法，不适用于业务项目的复杂开发环境 | ❌ |
自己写 Map、Set 的 polyfill | 定制化高、体积小 | 1、重复造轮子，容易在日后年久失修成为坑；2、即使体积小，依然所有用户都要加载 | ❌ |
polyfill-service | 只给用户返回需要的 polyfill，社区维护 | 部分国内奇葩浏览器 UA 可能无法识别（但可以使用降级返回所需全部 polyfill） | ✔️ |
Polyfill Service原理
访问页面，发送请求，识别 User Agent，然后下发不同的 Polyfill
如何使用动态 Polyfill service
polyfill.io 官方提供的服务
基于官方自建 polyfill 服务
我们可以打开：https://polyfill.io/v3/polyfill.min.js
在谷歌浏览器打开的时候，返回如下：
在 iphoone 5/se 的情况下返回如下：
Polyfill service 问题
比如：国内的浏览器魔改会导致识别 User Agent 出现问题，这种情况可以降级使用全部返回的。
