polyfill 与 transform-runtime

首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。

　　但是，存在如下两个问题：

1. 异步加载组件时，会产生 polyfill 代码冗余
2. 不支持对全局函数与实例方法的 polyfill

　　两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。

　　由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。

　　不支持全局函数（如：Promise、Set、Map），Set 跟 Map 这两种数据结构应该大家用的也不多，影响较小。但是 Promise 影响可能就比较大了。

　　不支持实例方法（如：'abc'.includes('b')、['1', '2', '3'].find((n) => n < 2) 等等），这个限制几乎废掉了大部分字符串和一半左右数组的新特性。

一般情况下 babel-plugin-transform-runtime 能满足大部分的需求，当不满足需求时，推荐使用完整的 babel-polyfill。

替换 babel-polyfill

　　首先，从项目中移除 babel-plugin-transform-runtime
　　卸载该依赖：

npm un babel-plugin-transform-runtime -D

　　修改 babel 配置文件

// .babelrc
{
  //...
  "plugins": [
    // - "transform-runtime"
  ]
  //...
}

　　然后，安装 babel-polyfill 依赖：

npm i babel-polyfill -D

　　最后，在入口文件中导入

// src/main.js
import 'babel-polyfill'