为何直接引入单个组件比从库入口引入体积更小？

我开发了一个支持Tree-Shaking的组件库，但通过VSCode的ImportCost插件发现，从组件库入口文件引入单个组件时，体积比直接引入组件的源文件明显更大。

组件库入口导出文件代码：

export {ButtonVariants} from "./components/Button/buttonVariants"
export {LoadingDots} from './components/LoadingDots/LoadingDots'
export {Icon} from './components/Icon/Icon'
export type {IconTypes} from './components/Icon/Icon'

LoadingDots组件代码：

export const LoadingDots = () => {
    return (
        <div className="flex items-center justify-center">
            <div className="mx-[2px] h-2 w-2 scale-0 animate-pulsate rounded-full" />
            <div className="mx-[2px] h-2 w-2 scale-0 animate-pulsate rounded-full [animation-delay:0.2s]" />
            <div className="mx-[2px] h-2 w-2 scale-0 animate-pulsate rounded-full [animation-delay:0.2s]" />
        </div>
    );
};

我已附上插件显示截图与发布后的文件截图，想请教这是插件误报还是我的组件库配置存在问题？

可能的原因与排查方向 #

1. ImportCost插件的计算逻辑限制
   插件是基于静态分析预估体积，而非实际构建后的产物。它可能会把入口文件里所有导出的模块都纳入预估范围，哪怕Tree-Shaking最终会剔除未使用的代码。这种情况下属于插件误报，实际构建后的体积应该是正常的。

2. 组件库打包配置问题

   • 确认是否开启Tree-Shaking相关配置：用Rollup的话，要保证output.format设为esm，同时开启treeshake: true；用Webpack的话，需设置mode: 'production'，且optimization.usedExports: true。
   • 检查package.json是否配置了module字段，指向组件库的ES模块入口——Tree-Shaking对CommonJS模块支持极差，多数构建工具无法对CJS进行Tree-Shaking。
   • 排查是否存在意外的副作用代码：如果组件文件里有直接执行的全局代码、修改全局变量等操作，Tree-Shaking工具可能无法安全剔除相关模块，导致入口引入时携带额外代码。

3. 发布后的文件结构问题
   查看发布后的组件库文件，确认入口文件是被打包成单一文件，还是保持模块分离状态。如果入口被打包成单文件，哪怕是ES模块，部分场景下构建工具的Tree-Shaking效率可能不如直接引入单个组件文件（正常配置下不应出现此差异）。

验证方法 #

• 搭建一个测试项目，分别用两种方式引入组件，然后用webpack-bundle-analyzer等工具分析构建后的产物体积，实际体积对比比插件预估更准确。
• 检查组件库的package.json，确保sideEffects字段配置正确：若无副作用则设为false；若有特定文件存在副作用，列出对应路径，帮助构建工具更精准地执行Tree-Shaking。

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