如何优雅地运行 polyfill

311 阅读1分钟

业界常用以下几种方式:

1、底层运行 webpack-runtime,基于 webpack-runtime 运行各个模块,包括 polyfill。这个是目前主流方式。这一方式的重大问题是 webpack-runtime 本身依赖的 polyfill 运行的,在webpack-runtime运行之后才运行。

2、手动引入 polyfill,然后再运行 webpack-runtime,不搞自动插入polyfill了。这种做法也是很常用。比较大的缺点是会使首屏过大。

3、打包时收集 polyfill,最后生成总的 polyfill 包,放在最前面运行。缺点同上。

4、使用兼容性好的模块化库,比如 requirejs。polyfill 和其他模块会被打包工具打成 chunk 后运行。这种方式好像是没什么问题,但是业界并没有广泛使用,我觉的可能的原因是,许多人认为 requirejs 太大了。requirejs 诞生比较早,里面必定有浏览器兼容的处理的代码,这样在高版本的浏览器中就运行了太多的不需要的兼容的处理代码了。

按照以下机制可以优雅地运行 polyfill

首先最底层为基础 polyfill,包括 document.currentScript、Promise、URL 等。

在基础 polyfill 之上写个模块化运行时类似 requirejs。有 polyfill 和预加载的情况下,代码大约只能一百多行。

剩余的 polyfill 其实和普通的依赖一样,被打包工具打成 chunk。具体打包的过程也是可优化的,但不在本文讨论范围内,后续会介绍。