使用Modern mode

Modern mode是什么

使用 Babel 我们能够利用 ES2015 中最新的语言特性，但这也意味着我们必须通过转换和 添加 polyfille 来支持旧浏览器。这些转换后的代码通常比原生 ES2015+ 代码更冗长，并且解析和运行较慢。鉴于当今大多数现代浏览器对原生 ES2015+ 有着不错的支持，而我们不得不将数据量更大和效率底下的代码发送给浏览器，因为我们必须支持那些旧的浏览器。
Vue CLI 提供了一个 Modern mode 来帮助您解决这个问题。用以下命令进行生产时：
vue-cli-service build --modern
复制代码
Vue CLI 构建两个版本的 js 包：一个面向支持现代浏览器的原生 ES2015+ 包，以及一个针对其他旧浏览器的包。
对比 Hello World 应用（vue 初始化的 Demo）使用这种模式打包出来的文件，通过现代模式输出的包（以后简称现代包）已经小了16%。在生产中，现代包通常会显著的提升 parse 速度和加载性能。

Modern mode 实现方式

解决之道便是 <script type="module">

// 支持的浏览器 会加载 app.js， 不支持的浏览器因为 type 值不是 text/javascript 所以脚本并不会被加载。
<script type="module" src="app.js"></script>
// 支持的浏览器 会忽略配置 `nomodule` 属性的脚本加载，不支持的浏览器会正常加载。
<script src="app-legacy.js" nomodule></script>