微信号:FeZaoDuKe

介绍:关注前端,产品设计. 每天5点半推送1篇相关文章到公众号,我们不创造内容,我们只是优秀内容的搬运者. 坚持每天阅读,每天进步一点点

【第1322期】Vue CLI 3 配置中 Modern mode

2018-07-05 05:16 冷旭

前言

今日早读文章由汽车之家@冷旭投稿分享。

@冷旭,目前就职于汽车之家,用户产品中心-研发部前端团队。

正文从这开始~

最近特别关注 vue-cli 3 的更新情况,有很多特别棒的新功能和特性,比如基于 UI 界面的项目管理器(参数配置、数据查看、插件安装一体的界面工具)、可配置的输出构建类型(App、库、组件、异步组件)、构建模式 Modern mode 等等。下面我们重点关注下 Modern mode 是什么,如何实现的。

目录

  • Modern mode 是什么?

  • Modern mode 实现方式

Modern mode 是什么?

使用 Babel 我们能够利用 ES2015 中最新的语言特性,但这也意味着我们必须通过转换和 添加 polyfille 来支持旧浏览器。这些转换后的代码通常比原生 ES2015+ 代码更冗长,并且解析和运行较慢。鉴于当今大多数现代浏览器对原生 ES2015+ 有着不错的支持,而我们不得不将数据量更大和效率底下的代码发送给浏览器,因为我们必须支持那些旧的浏览器。

Vue CLI 提供了一个 Modern mode 来帮助您解决这个问题。用以下命令进行生产时:

vue-cli-service build --modern

Vue CLI 构建两个版本的 js 包:一个面向支持现代浏览器的原生 ES2015+ 包,以及一个针对其他旧浏览器的包。

但最酷的部分是没有特殊的部署要求。生成的HTML文件中自动适配。 这个方式采用了 Phillip Walton 文章中讨论的技术方案:

  • 在支持原生 ES2015+ 的浏览器中,js会通过 <script type="module"> 加载,并且可以使用 <link rel="modulepreload"> 预加载。

  • 在不支持的浏览器中使用 <script nomodule> 来加载编译版本,并且这会被支持ES模块的浏览器所忽略。

  • Safari 10 中有一个小问题这里已经解决,可以自动加载。

对比 Hello World 应用(vue 初始化的 Demo)使用这种模式打包出来的文件,通过现代模式输出的包(以后简称现代包)已经小了16%。在生产中,现代包通常会显著的提升 parse 速度和加载性能。

Modern mode 实现方式

在浏览器环境语法特性检测还没有一个特别好的解决方案,随着一些新的 JavaScript 语法的出现,单凭特性检测来检查新语法的支持程度很是棘手。尽管如此对于 ES2015+ 的基本语法特性检测我们还是有办法的。解决之道便是 <script type="module"> 。

大部分开发者认为 <script type="module"> 是用来加载 ES 模块的,但是这里使用 <script type="module"> 的特性——加载浏览器可以处理的、使用 ES2015+ 语法的 JavaScript 文件。

换句话说,每个支持 <script type="module"> 的浏览器都支持你所熟知的大部分 ES2015+ 语法,例如:

  • 支持 <script type="module"> 的浏览器也支持 async 和 await 函数。

  • 支持 <script type="module"> 的浏览器也支持 Class 类。

  • 支持 <script type="module"> 的浏览器也支持 arrow functions。

  • 支持 <script type="module"> 的浏览器也支持 fetch 、Promises、Map、Set 等更多 ES2015+ 语法。

因此,唯一需要做的就是为不支持 <script type="module"> 的浏览器提供一个降级方案。对于支持 <script type="module"> 的浏览器会忽略 <script nomodule></script> 方式引入的脚本,如下代码:

// 支持的浏览器 会加载 app.js, 不支持的浏览器因为 type 值不是 text/javascript 所以脚本并不会被加载。
<script type="module" src="app.js"></script>
// 支持的浏览器 会忽略配置 `nomodule` 属性的脚本加载,不支持的浏览器会正常加载。
<script src="app-legacy.js" nomodule></script>

下面看一下vue打包出来的代码:

// ...
<link as="style" href="/css/app.6166f93b.css" rel="preload">
<link as="script" href="/js/app.4e3e948a.js" rel="modulepreload">
<link as="script" href="/js/chunk-vendors.fcf87964.js" rel="modulepreload">
<link href="/css/app.6166f93b.css" rel="stylesheet">
// ...
<script type="module" src="/js/chunk-vendors.fcf87964.js"></script>
<script type="module" src="/js/app.4e3e948a.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.ea74b83d.js" nomodule></script>
<script src="/js/app-legacy.854b5bc1.js" nomodule></script>

之前说到现代浏览器中都可以通过 <script type="module"> 来实现 ES2015+ 的特性检测针对性的加载脚本,但是 Safari 10 除外,这里的一段脚本是修复 safari 10 上 nomdoule 的表现不同的:

<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>

webpack 相关配置

如果你对 vue-cli 3 是如何实现这块的感兴趣可以查看源码。

为了生成不同环境的js文件,你需要2个 babel-loader targets 配置。

// resolve targets
let targets
if (process.env.VUE_CLI_BABEL_TARGET_NODE) {
 
// running tests in Node.js
 targets
= { node: 'current' }
} else if (process.env.VUE_CLI_BUILD_TARGET === 'wc' || process.env.VUE_CLI_BUILD_TARGET === 'wc-async') {
 
// targeting browsers that at least support ES2015 classes
 
// https://github.com/babel/babel/blob/master/packages/babel-preset-env/data/plugins.json#L52-L61
 targets
= {
   browsers
: [
     
'Chrome >= 49',
     
'Firefox >= 45',
     
'Safari >= 10',
     
'Edge >= 13',
     
'iOS >= 10',
     
'Electron >= 0.36'
   
]
 
}
} else if (process.env.VUE_CLI_MODERN_BUILD) {
 
// targeting browsers that support <script type="module">
 targets
= { esmodules: true }
} else {
 targets
= rawTargets
}

ES2015+ 浏览器支持目标只需配置 babel-loader 参数 targets = { esmodules: true } 即可。

link 标签的 preload 属性

preload 作为一个新的web标准,旨在提高性能,为web开发人员提供更细粒度的加载控制。

preload 使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失。

preload 还有许多其他好处。使用 as 来指定将要预加载的内容的类型,将使得浏览器能够:

  • 更精确地优化资源加载优先级。

  • 匹配未来的加载需求,在适当的情况下,重复利用同一资源。

  • 为资源应用正确的内容安全策略。

  • 为资源设置正确的 Accept 请求头。

在 modulepreload 诞生前,还没有一种很好的声明式预加载模块的方法。Chrome 从 64 版本后 开始 “实验性的支持这个特征”。<link rel="modulepreload"> 是 <link rel="preload"> 的特定模块版本,解决了后者的一些问题。

总结:

启用该模式会自动构建两个版本的 js 包,针对支持现代浏览器的原生 ES2015+ 包,和针对其他旧浏览器的包,生成的 HTML 会通过 <script type="module"> 和 <script nomodule> 进行自动降级,不需要任何特殊部署配置。原生 ES2015 包几乎不需要任何 polyfill 和编译,代码尺寸更小,现代浏览器 parse 和运行也更快。

拓展阅读:

  • ES6 Modules in Chrome M61+

  • ECMAScript modules in browsers

  • ES6 Modules in Depth

  • Deploying ES2015+ Code in Production
    Today

  • Preloading modules

关于本文
作者:@冷旭
原文:https://mp.weixin.qq.com/s/X_kl6AJ0Q_9BJk0_eRSM1w

最后,为你推荐


【第1129期】对vue.js单文件(.vue)进行单元测试


【第1103期】vue 自定义指令的魅力


 
前端早读课 更多文章 程序员职业小白书 —— 如何规划和经营你的职业 【第1320期】你不知道的前端SDK开发技巧 【第1319期】deno深入揭秘及未来展望 【第1318期】深入浅出 JavaScript 关键词 -- this 【第1317期】在 web 上使用 JavaScript 模块
猜您喜欢 利用R语言进行交互数据可视化 【TED】15岁少年,用袜子拯救了无数阿兹海默症患者! 开源网络监控系统 NetDisco 用户故事驱动的敏捷开发 – 2. 创建backlog 【征集令】欢迎加入Apache Kylin Tech Blog征集计划