21 分钟精通前端 Polyfill 方案
了解了本篇文章的内容后，我们首先认识到，尽管es2015已经发布两年，但浏览器的全面支持还远未达到完美，特别是在面对老版本浏览器如IE9时，兼容性成为了一个必要考虑的问题。为了解决这类问题，babel与polyfill方案成为了前端开发中的关键工具。
在使用babel进行编译时，虽然能实现如箭头函数、const、let等ES2015语法的使用，但面对如fetch、Object.assign等新方法在老浏览器中的兼容性问题，babel并不会自动进行polyfill，这时便需要引入polyfill方案。
最初解决方法是使用babel-plugin-transform-xxx插件来补全缺失的方法，如babel-plugin-transform-object-assign插件。虽然该插件能实现对Object.assign方法的替换，但在多文件项目中，引入方法的方式导致了重复引用的问题，影响性能。
为了解决引入方法重复引用的问题，babel引入了babel-plugin-transform-runtime插件，该插件能从全局引入所需方法，如core-js中的方法。然而，这种方式在引入方法时存在局限性，如自动引入的不精确性及无法处理全局对象方法的问题。
针对全局作用域的问题，babel提供了babel-polyfill插件，可以实现对ES2015所有方法的兼容性处理。在项目中引入babel-polyfill后，打包后的文件大小显著增加，达到了251kb（未压缩）。尽管如此，使用babel-polyfill提供了一个全面且稳定的es2015运行环境，适用于网页应用程序。
然而，对于库或框架开发，babel-polyfill的大体积不适用，应选择不污染全局环境的babel-plugin-transform-runtime。在应用开发中，babel-preset-env插件可以自动识别代码并选择需要的polyfill，进一步优化文件大小，减少不必要的polyfill引入。
polyfill.io服务提供了一种根据浏览器选择polyfill的解决方案，用户只需引入cdn.polyfill.io/v2/poly...文件，服务器将根据浏览器UA返回对应的polyfill。polyfill.io不仅提供CDN服务，还开源了自己的实现方案polyfill-service，允许用户轻松配置自己的polyfill服务。
在使用polyfill.io前，需考虑其对国内浏览器环境的兼容性问题，以及缺失polyfill时的补救方案。尽管如此，polyfill.io是一个创新且优秀的方案，未来有望在更多网站中应用。
多重随机标签