Vue 3 对 Web 应用性能的改进

时间 2019-11-16

标签 vue web 应用性能改进栏目 HTML 繁體版

原文原文链接

做者：Filip Rakowski
翻译：疯狂的技术宅html

原文：https://vueschool.io/articles...前端

未经容许严禁转载vue

有关即将发布的 Vue.js 的第 3 个主要版本的信息愈来愈多。经过下面的讨论，虽然还不能彻底肯定其全部内容，可是咱们能够放心地认为，它将是对当前版本（已经很是出色）的巨大改进。 Vue 团队在改进框架 API 方面作得很是出色。尤雨溪将 Vue 3 的目标描述为：react

使其更快
使其更小
使其更易于维护
使其更容易定位到本地
让你的生活更轻松

经过查看 RFC 并进行交谈，我确信上述全部目标都会毫无问题地实现。在本文中，就其影响和可能性而言，我将讨论一些对我来讲最有趣的更改。webpack

性能优化

做为性能怪胎，在探究某些 API 以前我想先谈一谈 Vue 3 的性能。git

先从 Vue 3 的捆绑包大小开始。程序员

当前最小化并被压缩的 Vue 运行时大小约为 20kB（2.6.10 版为 22.8kB）。 Vue 3捆绑包的大小估计大约会减小一半，即只有大约 10kB！github

全局 API tree-shaking

诸如更好的模块化之类的许多其余优化之上，Vue 3 源代码将是 tree-shakeable。这意味着，若是你用不到它的某些功能的话（例如 component 或 v-show 指令），则这些功能将不会包含在你的产品包中。目前不管咱们使用 Vue 核心的什么功能，这些功能最终都会在咱们的生产代码中使用，由于 Vue 实例做为单个对象被导出，而且捆绑程序没法检测到该对象的哪些属性在代码中使用。web

// Vue 2.x - whole `Vue` object is bundled for production 
import Vue from 'vue'

Vue.nextTick(() => {})
const obj =  Vue.observable({})

为了使全局 API 能够 tree-shake，Vue 团队决定对其中的大多数 API 经过命名导出，以便捆绑程序能够检测和删除未使用的代码：面试

// Vue 3.x - only imported properties are bundled
import { nextTick, observable } from 'vue'

nextTick(() => {})
const obj = observable({})

这是一个重大变化，由于如今经过命名的导出才能使用只能之前的全局 API。这个更改将会影响：

Vue.nextTick
Vue.observable
Vue.version
Vue.compile （只限于完整版本）
Vue.set （仅在2.x兼容版本中，你会很快找到缘由）
Vue.delete （与上面相同）

咱们还须要一段时间才能彻底受益于此功能，由于它须要在生态系统中采用。 Vue 团队将发布兼容性版本，所以咱们应该可以使用也使用旧的 API 插件，但会下降性能。

能够 tree-shake 的 JavaScript API 不止一个。在后台，Vue 编译器（将 Vue 模板转换为渲染功能的工具）将检测模板中使用的指令，并对其进行 tree-shake。例以下面的模板：

<transition>
  <div v-show="ok">hello</div>
</transition>

在被 Vue 编译器处理后，看起来是这样的：

import { h, Transition, applyDirectives, vShow } from 'vue'

export function render() {
  return h(Transition, [
    applyDirectives(h('div', 'hello'), this, [vShow, this.ok])
  ])
}

每一个人都会从全局 API tree-shaking 中受益（尤为是咱们的用户），可是我认为制做小型的轻量级网站并仅使用 Vue 功能子集进行交互的人（最能替代 jQuery 之类的库）的人会对此最为重视。

基于代理的响应性

尽管捆绑包的大小可能会严重影响应用的加载时间，可是在下载后，它也应该可以快渲染且运行流畅。

Vue 核心团队很是了解这一点，这就是为何在运行时性能上也有很大改进的缘由。

让咱们从最具影响力的一种系统开始，它基于 JavaScript Proxies。当前的 Vue 响应系统是基于 Object.defineProperty 的，有一些局限性。最多见并使人沮丧的是 Vue 没法跟踪响应对象的属性添加和删除。为此咱们须要使用 Vue.set 和 Vue.delete 来保持响应系统的正常运行。经过使用 JS Proxies，咱们终于能够摆脱这种丑陋的解决方法了。

// Adding a new property to reacitve object in Vue 2.x
Vue.set(this.myObject, key, value) 
// Adding a new property to reactive object in Vue 3
this.myObject[key] = value

代理的真正影响能够进行更快的组件初始化和修补。 根据测试，速度大约快 2 倍！

这种改进尤其重要，由于 Vue 必须使用 getters/setters 来递归地遍历全部对象及其属性，并对其进行转换。经过使用代理，这个过程就变得容易得多。

值得一提的是，因为使用了 JS Proxies， Vue 3 将会放弃对 Internet Explorer（而不是Edge）的支持，可是请放心，对于但愿支持 IE 的用户来讲，它会保持兼容性。

时间切片

根据尤雨溪的推文，此功能不会包含在 Vue 3 中。

Vue 3 另外一个使人兴奋的性能功能是对时间切片的实验性支持，可是它不多被说起。

用一个比喻来解释什么是时间切片。想象有一条买冰淇淋的队伍，它很是的长。由于那是镇上最好的冰淇淋，人们一个接一个的去买。因为某种缘由，没有关于可用口味的信息。要获得这个信息，你须要询问直接出售冰淇淋的女士。

在这种状况下，咱们可能最终会获得 2 条记录——其中一条给想要购买冰淇淋的人（说服他们耐心等待），另外一条给但愿在选择以前了解更多口味信息的人，咱们应该尽快得到这个信息。不幸的是，只有一位女士在卖冰淇淋，她在为“主”线上的全部客户提供服务以前不会回答任何问题。

对于还没有被说服的客户来讲，这并非最好的体验，大多数人可能会发现这不值得等待。为了解决这个问题，女士能够在每 2 至 3 个服务对象中回答一个问题。两组都应该对此解决方案感到满意。

这正是 CPU 与 Web 应用一块儿工做的方式。咱们有一条“主”队列（称为“主线程”），须要完成其全部主要任务（脚本、渲染等），而后才能响应用户交互。对于某些页面，这可能会致使很是糟糕的用户体验，具体取决于 Vue 组件加载或从新渲染所需的时间。

为了使其更可靠，最好对此脚本进行评估并“切”成段，在每次执行后查看是否有用户输入要处理。这样，不管须要进行多少次渲染或从新渲染，程序都将保持响应状态。这就是在 Vue 3 中的工做方式。

这是尤雨溪在 Vue 3 中展现时间分片功能的方式。请注意脚本执行时间轴中的小间隙，能够在这些间隙中处理用户输入。

可以轻松识别为何从新渲染组件的能力

工具与开箱即用的性能同等重要。因此咱们能够在 Vue 3 中看到一个新的生命周期 hook ——renderTriggered。能够用它来跟踪和消除没必要要的组件从新渲染，当把它与时间切片结合使用时，就成了在运行时性能优化中很是强大的武器。

const Component = {
  // other properties
  renderTriggered (event) {
     console.log(`Re-render of ` + this.$options.name + ` component`, event)
  }
}

还有什么

除了上面在 Vue 3 中看到的内容之外，还有不少东西，可是这些多是影响最大的。许多未说起的改进将会隐藏在 Vue 编译器生成的代码中，或者与实现细节和算法绑定在一块儿

可是，有几项改进值得一提：

输出代码将更易于针对 JavaScript 编译器进行优化
输出代码一般会更好地进行优化
因为改进了补丁算法，将避免没必要要的 parent/children 从新渲染

另外，在将来几天里，你能够期待尤雨溪撰写的一篇深刻的文章，介绍他们专门针对 Vue 编译器进行的性能优化。

摘要

尽管 Vue 已经成为目前性能最好的框架之一，但咱们仍然将会在第三版中看到重大改进。特别是在捆绑包大小和运行时性能方面。还进行了无数的微优化。我认为 Vue 3 很是适合现代移动优先和性能导向的 web。

别忘了 Vue 是惟一由社区彻底驱动的主要框架。本文中列出的全部更改都以 RFC 的形式在此处与社区一块儿讨论。你能够帮助核心团队，你能够表达对有效 RFC 的意见，甚至能够提出本身的改进建议。让咱们一块儿使 Vue 更好！😉

接下来是什么

在下一篇文章中，将探讨新的 Vue 3 API 将如何影响咱们编写 web 应用的方式。咱们将研究各类 API，包括最近流行的 Composition API，并了解如何用它来编写更好和更可维护的代码。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...