{site_name}

{site_name}

🌜 搜索

Vue 3.0 全局API Treeshaking 是指在 Vue 3 应用中,

前端 𝄐 0
vue全局api有哪些,vue全局使用axios,vue全局方法和实例方法,vue3.0 全局变量,vue全局配置,vue3.0全局组件
Vue 3.0 全局API Treeshaking 是指在 Vue 3 应用中,只会打包使用到的全局 API,未被使用的全局 API 不会被打包进最终的代码中,从而减小打包后代码的体积。

举例来说,假设应用中只用到了 Vue 的 createApp、defineComponent 和 reactive 这三个全局 API,那么在打包时,只有这三个 API 会被打包进最终的代码中,其他未被使用的全局 API 不会被打包。

下面是一个简单的例子:

js
import { createApp, defineComponent } from 'vue'

const MyButton = defineComponent({
template:
<button @click="onClick">{{ text }}</button>
,
props: {
text: String
},
setup(props) {
function onClick() {
alert(Clicked: ${props.text})
}

return {
onClick
}
}
})

const app = createApp({
components: {
MyButton
},
data() {
return {
buttonText: 'Click me'
}
},
template:
<div>
<my-button :text="buttonText" />
</div>

})

app.mount('#app')


在上述代码中,只用到了 createApp 和 defineComponent,其他全局 API 如 inject、provide 等都没有被使用,因此在打包时不会被包含在最终的代码中。