在npm run build --modern成功运行后，我只在输出中看到一个应用程序。不应该有两个？
在
npm run build --modern成功运行后，我只在输出中看到一个应用程序。不应该有两个？
实际上，build --modern命令在dist/js中创建了两个应用程序（请参阅dist/js/app.4e3aeb0e.js和dist/js/app-legacy.10b7d753.js）：
➜ ls -al dist/js
total 1840
drwxr-xr-x 10 tony staff 320 Sep 2 19:25 .
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 ..
-rw-r--r-- 1 tony staff 4772 Sep 2 19:25 app-legacy.10b7d753.js <-- LEGACY
-rw-r--r-- 1 tony staff 23682 Sep 2 19:25 app-legacy.10b7d753.js.map
-rw-r--r-- 1 tony staff 4718 Sep 2 19:25 app.4e3aeb0e.js <-- MODERN
-rw-r--r-- 1 tony staff 23625 Sep 2 19:25 app.4e3aeb0e.js.map
-rw-r--r-- 1 tony staff 80454 Sep 2 19:25 chunk-vendors-legacy.df5f2e07.js <-- LEGACY
-rw-r--r-- 1 tony staff 397535 Sep 2 19:25 chunk-vendors-legacy.df5f2e07.js.map
-rw-r--r-- 1 tony staff 63276 Sep 2 19:25 chunk-vendors.4fd390fb.js <-- MODERN
-rw-r--r-- 1 tony staff 326296 Sep 2 19:25 chunk-vendors.4fd390fb.js.map
这些应用程序有选择地加载到index.html中。首先，现代模式脚本在<link rel="modulepreload">中预装了<head>：
<link href=/js/app.4e3aeb0e.js rel=modulepreload as=script>
<link href=/js/chunk-vendors.4fd390fb.js rel=modulepreload as=script>
这些脚本稍后会加载到<body>中（注意：只有支持<script type="module">的浏览器才会加载脚本）：
<script type=module src=/js/chunk-vendors.4fd390fb.js></script>
<script type=module src=/js/app.4e3aeb0e.js></script>
最后，有一个nomodule回退到遗留模式脚本（注意：nomodule属性告诉浏览器仅在不支持模块脚本时才加载脚本）：
<script>!function () { var e = document, t = e.createElement("script"); if (!("noModule" in t) && "onbeforeload" in t) { var n = !1; e.addEventListener("beforeload", function (e) { if (e.target === t) n = !0; else if (!e.target.hasAttribute("nomodule") || !n) return; e.preventDefault() }, !0), t.type = "module", t.src = ".", e.head.appendChild(t), t.remove() } }();</script>
<script src=/js/chunk-vendors-legacy.df5f2e07.js nomodule></script>
<script src=/js/app-legacy.10b7d753.js nomodule></script>
我比较 - 现代和没有现代之间的大小，没有区别？
我不确定你是如何比较尺寸的，但现代版本的尺寸实际上更大。在下面的示例中，我构建了一个Vue-CLI生成的应用程序（使用default预设）两次（一次没有--modern，再次使用--modern），并重命名输出目录。看看dist-modern和index.html的js/的大小增加：
➜ ls -al dist*
dist-default:
total 16
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 .
drwxr-xr-x 13 tony staff 416 Sep 2 19:27 ..
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 css
-rw-r--r-- 1 tony staff 1150 Sep 2 19:25 favicon.ico
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 img
-rw-r--r-- 1 tony staff 724 Sep 2 19:25 index.html
drwxr-xr-x 6 tony staff 192 Sep 2 19:25 js
dist-modern:
total 16
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 .
drwxr-xr-x 13 tony staff 416 Sep 2 19:27 ..
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 css
-rw-r--r-- 1 tony staff 1150 Sep 2 19:25 favicon.ico
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 img
-rw-r--r-- 1 tony staff 1213 Sep 2 19:25 index.html <-- LARGER
drwxr-xr-x 10 tony staff 320 Sep 2 19:25 js <-- LARGER
我找不到你放在图片中的文档，但是从docs它说：
--modern使用现代模式构建您的应用程序，将原生ES2015代码发送到支持它的现代浏览器，并自动回退到旧版软件包。
然后我将其解释为一个灵活的应用程序。
从您在评论中提到的文档中，我发现了相关部分：
但很酷的部分是没有特殊的部署要求。生成的HTML文件自动采用Phillip Walton的优秀帖子中讨论的技术：
现代捆绑包装有
<script type="module">，在支持它的浏览器中;它们也是使用<link rel="modulepreload">预装的。旧版软件包加载了
<script nomodule>，支持ES模块的浏览器会忽略它。Safari 10中的
<script nomodule>修复程序也会自动注入。
有了这个我能够以相同的方式解释，一个应用程序根据浏览器的行为不同。
谈到大小，我不确定是否需要更多设置来启用它，但根据文档，它不是。我鼓励你继续阅读它们，对我而言，这是了解任何需求的最佳方式。