【发布时间】：2019-02-07 13:39:12
【问题描述】：
npm run build --modern 成功运行后，我在输出中只看到一个应用程序。不应该有两个吗？
【问题讨论】：
【发布时间】：2019-02-07 13:39:12
【问题描述】：
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。首先，现代模式脚本在<head>中预加载了<link rel="modulepreload">：
<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 属性告诉浏览器仅在不支持模块脚本时才加载脚本）： p>
<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>
我比较一下--modern和nomodern的大小，有没有区别？
我不确定您是如何比较尺寸的，但现代版本的尺寸实际上更大。在下面的示例中，我两次构建了一个 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
【讨论】：
-
感谢您的回答！我是 Vue 的新手。我需要做一些设置吗？我也是这样比较大小的。没有区别。我也尝试了其他选项，例如
--report。我没有找到report.html。所以我想我没有做一些设置。我阅读了文档，没有关于设置的内容。 -
无需设置。你用的是什么版本的 vue-cli？我建议安装最新版本（当前为 3.0.1）。然后，生成带有
default预设的项目，运行npm run build，将dist重命名为dist-1，运行npm run build --modern，然后将新的dist目录与dist-1进行比较。
我找不到您在图片中添加的文档，但 docs 显示：
--modern使用现代模式构建您的应用程序，将原生 ES2015 代码发送到支持它的现代浏览器，并自动回退到旧包。
然后我会将其解释为一个灵活的应用程序。
从您在评论中提到的文档中，我发现了这个相关部分：
不过，很酷的部分是没有特殊的部署要求。生成的 HTML 文件自动采用了 Phillip Walton 的优秀文章中讨论的技术：
现代包加载了
<script type="module">，在支持它的浏览器中；它们也使用<link rel="modulepreload">预加载。旧包加载了
<script nomodule>，支持 ES 模块的浏览器会忽略它。Safari 10 中
<script nomodule>的修复程序也会自动注入。
这样我就可以用同样的方式来解释，一个应用程序的行为会因浏览器而异。
谈到尺寸，我不确定是否需要更多设置来启用它，但根据文档，它不是。我鼓励您继续阅读它们，对我来说，这是满足任何需求的最佳方式。
【讨论】：
-
docs 在这里。而且我比较了--modern 和nomodern 的大小，有没有区别？是否需要其他设置？我是 Vue 的新手。非常感谢
-
感谢您的回答！但是我尝试了其他选择，它们也不起作用。虽然我暂时不需要该功能，但我仍在寻找原因。