Vue 3.0 全局API Treeshaking

#2.x 語(yǔ)法

如果你曾經(jīng)在 Vue 中手動(dòng)操作過 DOM，你可能會(huì)遇到以下模式：

import Vue from 'vue'
Vue.nextTick(() => {
  // 一些和DOM有關(guān)的東西
})

或者，如果你一直在對(duì)涉及 async components 的應(yīng)用程序進(jìn)行單元測(cè)試，那么很可能你編寫了以下內(nèi)容：

import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
test('an async feature', async () => {
  const wrapper = shallowMount(MyComponent)
  // 執(zhí)行一些DOM相關(guān)的任務(wù)
  await wrapper.vm.$nextTick()
  // 運(yùn)行你的斷言
})

Vue.nextTick() 是一個(gè)全局的 API 直接暴露在單個(gè) Vue 對(duì)象上——事實(shí)上，實(shí)例方法 $nextTick() 只是一個(gè)方便的包裝 Vue.nextTick() 為方便起見，回調(diào)的 this 上下文自動(dòng)綁定到當(dāng)前實(shí)例。

模塊捆綁程序，如 webpack 支持 tree-shaking，這是“死代碼消除”的一個(gè)花哨術(shù)語(yǔ)。不幸的是，由于代碼是如何在以前的 Vue 版本中編寫的，全局 API Vue.nextTick() 不可搖動(dòng)，將包含在最終捆綁中不管它們實(shí)際在哪里使用。

#3.x 語(yǔ)法

在 Vue 3 中，全局和內(nèi)部 API 都經(jīng)過了重構(gòu)，并考慮到了 tree-shaking 的支持。因此，全局 API 現(xiàn)在只能作為 ES 模塊構(gòu)建的命名導(dǎo)出進(jìn)行訪問。例如，我們之前的片段現(xiàn)在應(yīng)該如下所示：

import { nextTick } from 'vue'
nextTick(() => {
  // 一些和DOM有關(guān)的東西
})

and

import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
import { nextTick } from 'vue'
test('an async feature', async () => {
  const wrapper = shallowMount(MyComponent)
  // 執(zhí)行一些DOM相關(guān)的任務(wù)
  await nextTick()
  // 運(yùn)行你的斷言
})

直接調(diào)用 Vue.nextTick() 將導(dǎo)致臭名昭著的 undefined is not a function 錯(cuò)誤。

通過這一更改，如果模塊綁定器支持 tree-shaking，則 Vue 應(yīng)用程序中未使用的全局 api 將從最終捆綁包中消除，從而獲得最佳的文件大小。

#受影響的 API

Vue 2.x 中的這些全局 API 受此更改的影響：

• Vue.nextTick
• Vue.observable (用 Vue.reactive 替換)
• Vue.version
• Vue.compile (僅全構(gòu)建)
• Vue.set (僅兼容構(gòu)建)
• Vue.delete (僅兼容構(gòu)建)

#內(nèi)部幫助器

除了公共 api，許多內(nèi)部組件/幫助器現(xiàn)在也被導(dǎo)出為命名導(dǎo)出，只有當(dāng)編譯器的輸出是這些特性時(shí)，才允許編譯器導(dǎo)入這些特性，例如以下模板：

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

被編譯為類似于以下的內(nèi)容：

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

這實(shí)際上意味著只有在應(yīng)用程序?qū)嶋H使用了 Transition 組件時(shí)才會(huì)導(dǎo)入它。換句話說，如果應(yīng)用程序沒有任何 Transition 組件，那么支持此功能的代碼將不會(huì)出現(xiàn)在最終的捆綁包中。

隨著全局 tree-shaking，用戶只需為他們實(shí)際使用的功能“付費(fèi)”，更好的是，知道了可選特性不會(huì)增加不使用它們的應(yīng)用程序的捆綁包大小，框架大小在將來已經(jīng)不再是其他核心功能的考慮因素了，如果有的話。

重要

以上僅適用于 ES Modules builds，用于支持 tree-shaking 的綁定器——UMD 構(gòu)建仍然包括所有特性，并暴露 Vue 全局變量上的所有內(nèi)容 (編譯器將生成適當(dāng)?shù)妮敵?，以使用全局外?api 而不是導(dǎo)入)。

#插件中的用法

如果你的插件依賴受影響的 Vue 2.x 全局 API，例如：

const plugin = {
  install: Vue => {
    Vue.nextTick(() => {
      // ...
    })
  }
}

在 Vue 3 中，必須顯式導(dǎo)入：

import { nextTick } from 'vue'
const plugin = {
  install: app => {
    nextTick(() => {
      // ...
    })
  }
}

如果使用 webpack 這樣的模塊捆綁包，這可能會(huì)導(dǎo)致 Vue 的源代碼綁定到插件中，而且通常情況下，這并不是你所期望的。防止這種情況發(fā)生的一種常見做法是配置模塊綁定器以將 Vue 從最終捆綁中排除。對(duì)于 webpack，你可以使用 externals 配置選項(xiàng)：

// webpack.config.js
module.exports = {
  /*...*/
  externals: {
    vue: 'Vue'
  }
}

這將告訴 webpack 將 Vue 模塊視為一個(gè)外部庫(kù)，而不是捆綁它。

如果你選擇的模塊綁定器恰好是 Rollup，你基本上可以免費(fèi)獲得相同的效果，因?yàn)槟J(rèn)情況下，Rollup 會(huì)將絕對(duì)模塊 id (在我們的例子中為 'vue') 作為外部依賴項(xiàng)，而不會(huì)將它們包含在最終的 bundle 中。但是在綁定期間，它可能會(huì)發(fā)出一個(gè)“將 vue 作為外部依賴” 警告，可使用 external 選項(xiàng)抑制該警告：

// rollup.config.js
export default {
  /*...*/
  external: ['vue']
}