Why are my component smaller when accessing it specifically

Question

I have created my own components library and it should be tree shakable. But by using the VSCode extension importCost I can see that by accessing the specific component the size is significal smaller.

The main file that exports the components look like this:

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'

And the component itself:

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>
    );
};

Output after publish:

Is it just the extension being wrong or have I done something wrong?