Vue 3.0 全局API Treeshaking

#2.x 語法

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

import Vue from 'vue'


Vue.nextTick(() => {
  // 一些和DOM有關的東西
})

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

import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'


test('an async feature', async () => {
  const wrapper = shallowMount(MyComponent)


  // 執(zhí)行一些DOM相關的任務


  await wrapper.vm.$nextTick()


  // 運行你的斷言
})

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

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

#3.x 語法

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

import { nextTick } from 'vue'


nextTick(() => {
  // 一些和DOM有關的東西
})

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相關的任務


  await nextTick()


  // 運行你的斷言
})

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

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

#受影響的 API

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

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

#內(nèi)部幫助器

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

<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]])])
}

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

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

重要

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

#插件中的用法

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

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

在 Vue 3 中，必須顯式導入：

import { nextTick } from 'vue'


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

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

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

這將告訴 webpack 將 Vue 模塊視為一個外部庫，而不是捆綁它。

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

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