您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“vue3.0的global-api-treeshaking怎么用”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue3.0的global-api-treeshaking怎么用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
import { nextTick, observable } from 'vue'
nextTick(() => {})
const obj = observable({})
隨著Vue API的增長,我們一直在努力平衡功能和捆綁包大小之間的權(quán)衡。我們希望將Vue的大小開銷保持在最小,但由于大小限制,我們也不想限制其功能。
通過ES模塊的靜態(tài)分析友好設(shè)計,現(xiàn)代化的打包機(jī)與縮減程序相結(jié)合,現(xiàn)在可以消除未在捆綁包中任何地方使用的ES模塊導(dǎo)出。我們可以重組Vue的全局和內(nèi)部API,以利用此優(yōu)勢,以便用戶只為他們實(shí)際使用的功能付費(fèi)。
此外,知道可選功能不會增加不使用它們的用戶的捆綁包大小,因此我們現(xiàn)在有更多空間在核心中包含可選功能。
當(dāng)前在2.x中,所有全局API都在單個Vue對象上公開:
import Vue from 'vue'
Vue.nextTick(() => {})
const obj = Vue.observable({})
在3.x中,只能將它們作為命名導(dǎo)入進(jìn)行訪問:
import Vue, { nextTick, observable } from 'vue'
Vue.nextTick // undefined
nextTick(() => {})
const obj = observable({})
Affected 2.x APIs
Internal Helpers
除了公共API外,許多內(nèi)部組件/幫助程序也可以作為命名導(dǎo)出導(dǎo)出。這允許編譯器輸出僅在使用功能時才導(dǎo)入功能的代碼。例如以下模板
<transition>
<div v-show="ok">hello</div>
</transition>
可以編譯為以下內(nèi)容(出于解釋目的,而不是確切的輸出):
import { h, Transition, applyDirectives, vShow } from 'vue'
export function render() {
return h(Transition, [
applyDirectives(h('div', 'hello'), this, [vShow, this.ok])
])
}
Global API usage in plugins
2.x
const plugin = {
install: Vue => {
Vue.nextTick(() => {
// ...
})
}
}
3.x
import { nextTick } from 'vue'
const plugin = {
install: app => {
nextTick(() => {
// ...
})
}
}
讀到這里,這篇“vue3.0的global-api-treeshaking怎么用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。