前端页面浏览器兼容问题的解决

react出现的兼容性问题。

react兼容所有主流浏览器，但是对于IE9和IE10需要加入polyfill代码。但是需要在业务代码中显示引入，不太友好，所以探索了一下。

preset-env。

为高版本javascript提供兼容低版本浏览器的代码。
常用选项：

1. browsers，指定需要兼容哪些浏览器的那些版本，浏览器列表，兼容性查询工具。注：就Babel的兼容性查询而言caniuse不可靠，这里是根据。
2. include，如果使用useBuildIns位usage模式可能会在这里碰到坑，本来文档写的是可以强制引入没有检测到但是我们需要的polyfill代码，但是usage模式的引入早于include而且文档没有更新，看如下结论：
   

3. useBuildIns，包含三个值entry、usage、false。

   1. entry，在入口文件引入全部的polyfill。优点是彻底解决兼容问题，缺点是导致最终代码体积比较大。
   2. usage，根据代码的使用情况引入polyfill。优点是按需引入代码体积减小很多，缺点是node_modules中的高版本javascript检测不出来，引入不了polyfill。
   3. false，不添加polyfill也不解决兼容问题。

   可以看到三个值都有一些缺点，需要一种既能按需引入又能解决node_modules中兼容问题的方案。

4. preset-env的无法对依赖包中的代码polyfill。

   1. 在webpack的babel-loader中配置include包含node_modules，但是导致打包时间超长（ node_modules中的代码太多了），而且引入polyfill的时候不是引入到入口文件中导致引入重复的问题。
   2. 在babel的GitHub的issue中发现的一种方案，自己写插件，强制把需要的core-js模块引入到入口文件。
5. polyfill.io与动态引入polyfill。
   方案：在项目中插入脚本，把浏览器的UA信息附着到请求中，然后在服务端分析UA对应的浏览器，然后返回对应的polyfill。
   polyfill.io是更优秀的方案，能解决浏览器兼容问题，而且对资源体积也不会浪费，缺点是对需要兼容的浏览器会引入所有polyfill。