Vue3 压缩需求函数

Question

本人在当前项目里只用了一个第三方代码库, Vue3
因为我想精益求精, 代码能越少越完美(整个系统几十个页面加起来压缩后的JS也就100KB左右 包括Vue)
大量使用原生Web Component, 所以Vue依赖的不算特别多, 在JS里用到的就下面几个, 其它的用在HTML里面:

Vue.ref();
Vue.reactive();
const app = Vue.createApp({
  setup: () => {
    Vue.onMounted(() => {
        ...
    })
    
    return ... 
  },
  data: () => {
    return ...
  }
})    
app.mount('#...')

据说我们是可以根据需求提炼用到的功能函数,让产品代码更小,但都是配合*.vue的吗?
请教我是不用*.vue component的能否直接提炼出 vue.global.prod.js 里我只需要用到的的这几个功能(函数)?(不使用vue组件), 让gzip后代码不超过20K?? (现在的是gzip后42kb)

Answer 1

既然你们的项目都不排斥 web component。
那直接用 lit-element 吧，别用Vue了，绝对可以满足你的要求

Answer 2

不要用 Vue.ref()、Vue.reactive()，这样写：

import {
  ref,
  reactive,
  onMounted,
} from 'vue';

Vue3 起，官方支持打包时的 tree-shaking。