理解 vue-cli 现代模式

背景

有了 Babel 我们可以兼顾所有最新的 ES2015+ 语言特性，但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015+ 代码会更冗长，运行更慢。现如今绝大多数现代浏览器都已经支持了原生的 ES2015，所以因为要支持更老的浏览器而为它们交付笨重的代码是一种浪费。

Vue CLI 提供了一个“现代模式”帮你解决这个问题。以如下命令为生产环境构建：

vue-cli-service build --modern

原理

本质上是有条件的加载polyfill，在运行时检测他们的支持。

通过<script type="module">检测基本的ES2015语法支持。

• 每个支持的浏览器<script type="module">也支持async / await
• 每个支持的浏览器<script type="module">也支持类。
• 每个支持的浏览器<script type="module">也支持箭头功能。
• 每个支持的浏览器<script type="module">也支持fetch，Promises，Map和Set等等！
  就是这样子...