原理默认情况下，它会把useBuiltIns: 'usage' 传递给 babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的polyfill。 确保了最终包里的polyfill数量最小化。然而，这也意味着如果其中一个依赖需要特殊的polyfill，默认情况下babel无法检测出来。
// 源代码 var a = new Promise();
// 输出 import 'core-js/modules/es6.promise'; var a = new Promise();
依赖需要Polyfills如果有依赖需要polyfill，你有几种选择：(来自babel-preset-app)
如果该依赖基于一个目标环境不支持的ES版本撰写，将其添加到vue.config.js中的 traspileDependcies选项。这会为该依赖同时开启语法转换和根据使用情况检测polyfill。默认情况下，babel-loader会忽略所有node_modules中的文件。如果想要通过Babel显式转译一个依赖，可以在这选项中列出：
trasnpileDependencies: [lodash，...]
如果该依赖交付了ES5代码并显式列出了需要的polyfill： 你可以使用@vue/babel-preset-app 的polyfills选项 预包含所需要的polyfill。( 注册es6.promise将被默认包含，因为现在的库依赖Promise非常普遍。)
// babel.config.js module.exports = { presets: [ ['@vue/app', { polyfills: [ 'es6.promise', 'es6.symbol' ], useBuiltIns: 'entry' }] ] }
推荐这种方式添加polyfills而不是在源代码中直接导入它们，因为如果这里列出的polyfill在browserflist的目标不需要，则它会被自动排除。 3. 如果该依赖交付了ES5 代码，但使用了ES6+ 特性且没有显式列出需要的polyfill，请使用useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'。 这会根据browserlist 目标导入所有polyfill，这就不需要担心依赖的polyfill问题了， 缺点：但是包含了一些没有用到的polyfill所以最终的包可能会增加。(这也没办法，因为依赖没有显式列出需要的polyfill）
// 源代码 import '@babel/polyfill'
// 输出 import 'core-js/modules/es7.string.pad-start'; import 'core-js/modules/es7.string.pad-end';
Modern mode(现代模式)
什么是现代模式？现代模式是Vue CLI3提出的，为了解决支持更老的浏览器而为它们交付笨重的代码的问题，使用官方所给的脚手架搭建好项目后，可以像下面这样运行：
vue-cli-service build --modern
CLI3内置的Service服务会调用webpack构建编译生成两种类型的包，一种是现代版的包，它不会引入额外的polyfill。 一种是旧版的包，面向不支持的旧版浏览器，它会根据browserslist以及babel-preset-env的配置引入额外的polyfill。
现代的包会通过 <script type="module"> 在被支持的浏览器中加载；它们还会使用 <link rel ="modulepreload"> 进行预加载。
旧版的包通过 <script nomodule> 加载，会被支持ESM的浏览器忽略。
输出对比未使用现代模式：
Vue CLI 3 现代模式：
使用了modern的方式，会在目录下生成了两种包：
解释
<script src="https://www.jb51.net/xx/sxx.js" nomodule></script>
script标签中声明了nomodule特性的，会告诉支持ES2015 Module的浏览器，不要去执行这个脚本。这种标签通常就是在老旧浏览器中使用的，引用的是带有legacy标识的脚本。
<script type="module" src="https://www.jb51.net/xxx/sss/a.js"></script>
当script标签中声明了type特性的值为module时，浏览器就会把里面的代码视作一整个JS模块，脚本内容的处理不受charset和defer属性的影响，代码的行为可能会与不指定为module时表现得不同。 (以前type的值一般是JS MIME值，在符合HTML5的浏览器，表示脚本为JS。但现在H5规范要求开发者省略这个属性而不提供冗余的MIME类型。)
小结
Vue CLI 3提供了一整套的解决方案，里面提供了社区以及Vue官方的工具，包含Browserslist、Babel、@Babel/preset-env以及现代模式来共同处理浏览器兼容性这个大坑。CLI3构建出的工程会利用Browserslist去进行浏览器查询(包括类型和版本)，然后结合预设对Babel进行配置共同来针对目标环境对源代码进行转译或引入Polyfills来解决兼容性问题。Moreover，现代模式同样会根据这些设定以及目标环境去构建出适合运行在支持项目所有新特性的浏览器以及不支持特性的浏览器的两种包。最后，预告一下，下一篇文章会结合Modernizr和CLI3来进行实践 ---- 《浏览器兼容性实践-Mondernizr篇》
Reference