使用vite 库模式打包vue组件库,组件库可以被treesharking吗?

51 阅读1分钟

组件库核心配置

  build: {
    lib: {
      entry: resolve('src/components/index.ts'),
      name: 'test-ui',
      formats: ['es'],
    },
    cssCodeSplit: true,
    outDir: 'lib',
    rollupOptions: {
      external: ['vue'],
      output: {
        exports: 'named',
        globals: {
          vue: 'Vue',
        },
      },
    },
  },

组件代码

import Input from './src/input.vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Input.install = (Vue: any) => Vue.component(Input.name, Input)
export default Input
export { Input }

然后把组件库打包成es 格式的文件后,在vite项目里进行引入,最终打包的时候会把组件库里未使用到的组件也打包进去了,相当于没有对组件库进行成功的treeSharking。 请问问题出现在哪里?组件库导出和项目引入完全按照import和export的方式进行,项目都是最新的,组件库sideEffects:false,也毫无作用。