成功npm run build --modern运行后，我在输出中只看到一个应用程序。不应该有两个吗？
问问题
1605 次
2 回答
3
成功
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>
我比较了 --modern 和 nomodern 的大小，有没有区别？
我不确定您是如何比较尺寸的，但现代版本实际上尺寸更大。在下面的示例中，我构建了一个 Vue-CLI 生成的应用程序（使用default预设）两次（一次没有--modern，一次使用--modern），并重命名了输出目录。查看和dist-modern的大小增加：index.htmljs/
➜ 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
于 2018-09-03T00:57:37.393 回答
3
我找不到您在图像中放入的文档，但从文档中它说：
--modern使用现代模式构建您的应用程序，将原生 ES2015 代码发送到支持它的现代浏览器，并自动回退到旧包。
然后我会将其解释为一个灵活的应用程序。
从您在评论中提到的文档中，我发现了这个相关部分：
很酷的部分是没有特殊的部署要求。生成的 HTML 文件自动采用了 Phillip Walton 的优秀文章中讨论的技术：
现代捆绑包在支持它的浏览器中加载
<script type="module">；它们也被预加载使用。<link rel="modulepreload">旧包是用 加载的
<script nomodule>，支持 ES 模块的浏览器会忽略它。Safari 10 中的修复程序
<script nomodule>也会自动注入。
这样我就可以用同样的方式来解释，一个应用程序的行为会因浏览器而异。
谈到尺寸，我不确定是否需要更多设置来启用它，但根据文档，它不是。我鼓励您继续阅读它们，对我来说，这是满足任何需求的最佳方式。
于 2018-09-02T03:52:28.713 回答