如何为UI组件库开发正确配置Vite？已解决

遇到的问题 #

• Vite会将未被入口文件src/index.ts关联的storybook文件（.storybook.ts）打包进最终产物，引入冗余代码
• SCSS中引入的字体被直接嵌入CSS文件，导致原本仅10-20KB的CSS体积增至4.3MB
• 构建后生成单一大型CSS文件，未按组件拆分，用户仅使用Button组件时也会加载全量样式，增加其项目体积

当前Vite配置 #

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
import path from 'path'

export default defineConfig({
    plugins: [dts()],
    build: {
        lib: {
            entry: 'src/index.ts',
            name: 'kuui',
            fileName: 'index',
        },
        rollupOptions: {
            external: ['react'],
            output: {
                globals: {
                    react: 'react',
                },
            },
        },
    },
    resolve: {
        alias: {
            '@': path.resolve('./src'),
        },
    },
})

问题解决 #

所有问题已解决，核心方案是禁用不必要的副作用，构建后CSS体积减少了90%。该方案是通过研究Ant Design源码发现的。

内容的提问来源于stack exchange，提问作者Manucher Kurbanov