码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli --modern

时间:2020-02-09 11:48:54      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:tar   rem   fun   性能   lease   javascrip   properly   styles   htm   

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>

vue-cli --modern

标签:tar   rem   fun   性能   lease   javascrip   properly   styles   htm   

原文地址:https://www.cnblogs.com/mengfangui/p/12286458.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!