vue-cli --modern
Vue CLI 会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器。
-
现代版的包会通过
<script type="module">在被支持的浏览器中加载；它们还会使用<link rel="modulepreload">进行预加载。 -
旧版的包会通过
<script nomodule>加载，并会被支持 ES modules 的浏览器忽略。 -
一个针对 Safari 10 中
<script nomodule>的修复会被自动注入。
对于一个 Hello World 应用来说，现代版的包已经小了 16%。在生产环境下，现代版的包通常都会表现出显著的解析速度和运算速度，从而改善应用的加载性能。
--modern 环境打包后的html文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<title>test</title>
<link href="/js/about.3caf0064.js" rel="prefetch" />
<link href="/css/app.da641700.css" rel="preload" as="style" />
<link href="/css/chunk-vendors.22ebf426.css" rel="preload" as="style" />
<link href="/js/app.1e791432.js" rel="modulepreload" as="script" />
<link href="/js/chunk-vendors.b1ae0480.js" rel="modulepreload" as="script" />
<link href="/css/chunk-vendors.22ebf426.css" rel="stylesheet" />
<link href="/css/app.da641700.css" rel="stylesheet" />
</head>
<body>
<noscript>
<strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script type="module" src="/js/chunk-vendors.b1ae0480.js"> </script>
<script type="module" src="/js/app.1e791432.js">
</script>
<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.ad41bc4b.js" nomodule=""></script>
<script src="/js/app-legacy.3aef20c3.js" nomodule=""></script>
</body>
</html>
preload和prefetch关系
- preload和prefetch都没有同域名的限制
- preload主要用于预加载当前页面需要的资源；而prefetch主要用于加载将来页面可能需要的资源；
- preload需要使用as属性指定特定的资源类型以便浏览器为其分配一定的优先级，并能够正确加载资源；
- 浏览器支持情况：preload一般，prefetch较高。
- 加载时间：preload立即加载，prefetch浏览器闲置的时候才会加载。
typ="module" 与 nomodule
浏览器会识别typ="module"属性，并忽略设置有nomodule属性的脚本。这意味着你可以向支持模块加载的浏览器提供基于JS module的代码，同时让不支持模块加载的浏览器回退到普通js脚本模式。