How to reduce the bundle size of Web Components in Vue 怎么设置能减少 Web Components 的打包体积

[chenyongtong]

在使用 Vue3 编写 WebComponents 组件时，发现打包体积有：147.92 kB │ gzip: 46.10 kB，而不是文档中说的 ~16kb, 我该怎么减小它?

When writing Web Components using Vue 3, I found the bundle size to be 147.92 kB │ gzip: 46.10 kB, rather than the ~16kb mentioned in the documentation. How can I reduce it?

"vue": "^3.5.13",
"vite": "^6.0.1",

vite v6.0.2 building for production...
transforming...
✓ 8 modules transformed.
rendering chunks...
computing gzip size...
lib/hello-world/index.js  147.92 kB │ gzip: 46.10 kB
lib/hello-world/index.umd.cjs  98.04 kB │ gzip: 37.23 kB
✓ built in 1.42s

// index.ce.vue
 <template>
    <div>
      hello world
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>

</style>

// index.ts
import { defineCustomElement } from 'vue'
import Index from './index.ce.vue';

const IndexComponent = defineCustomElement(Index);

const registerComponent = (name = 'hello-world') => {
  customElements.define(name, IndexComponent);
}

export default registerComponent;

// vite.config.ts
export default defineConfig({
  ...
  build: {
    outDir: './lib',
    lib: {
      entry: resolve(__dirname, 'packages/hello-world/index.ts'),
      name: 'hello-world',
      fileName: 'hello-world/index',
      formats: ['es', 'umd'],
    },
  },
  ...
})

[workCleaner]

这个体积是你的打包文件体积，文档说的16kb是Vue 3 的核心库 (Vue runtime) 在生产环境下打包时的最小化文件大小，概念不一样。减小的我倒是也不太清楚等等大佬

[fiedsch]

If I understand the situation correctly: yo need something like

rollupOptions: {
  external: ['vue'],
  // ...
}

in your vite config, in order to get Vue not included in your bundle.

If you only ever use your bundle on a webpage alone it would not matter, as you would have to load the excluded Vue in a second step. But if you have two or more similar bundles (each with externalized Vue) the saving begins as you only have to load the excluded Vue once.