I’m cereating a design system aka component library with react typescript and vite as build tool
I had an issue that whenever I Import any component it was importing all the package not only the componeent, it was an issue related to the tree-shaking and I fixed it.
Now I have two issue which are:
1- I have about 200 Icons that I’m using them through an Icon component, and I’m using those icons as a react components, when I build I found that all Icon built with it which take big size from the bundle:
2- When import any components that depends on the Icon component or other dependency I found it takes big size, for example when I import Button component it takes (400k gzipped: 187.8k) which is big, and it is like that because it depends on Icon component, this is example of the Button component:

import { Icon } from "../Icon";
import { buttonVariants } from "./Button.variants";
import type { ButtonProps } from "./types";
import { Slot } from "@radix-ui/react-slot";
import clsx from "clsx";
import { forwardRef } from "react";

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { className, variant, size, disabled, asChild, startIcon, endIcon, full = false, ...props },
    ref
  ) => {
    const iconSize = () => {
      switch (size) {
        case "xs":
          return 12;
        case "sm":
          return 16;
        case "lg":
          return 32;
        default:
          return 24;
      }
    };

    const getGap = () => {
      switch (size) {
        case "xs":
          return "gap-1";
        case "sm":
          return "gap-1.25";
        case "lg":
          return "gap-1.75";
        default:
          return "gap-1.5";
      }
    };

    if (asChild) {
      return (
        <Slot
          className={clsx(buttonVariants({ variant, size, full }), className)}
          ref={ref}
          {...props}
        />
      );
    }

    return (
      <button
        disabled={disabled}
        className={clsx(buttonVariants({ variant, size, full }), className, {
          "y-inline-flex y-items-center y-justify-center": startIcon || endIcon,
          [getGap()]: startIcon || endIcon
        })}
        ref={ref}
        {...props}>
        {startIcon && (
          <Icon
            name={startIcon}
            size={iconSize()}
          />
        )}
        {props.children}
        {endIcon && (
          <Icon
            name={endIcon}
            size={iconSize()}
          />
        )}
      </button>
    );
  }
);

as you can see it is simple component and it give me that big size, same as for any other component, that depends on Icon component or other dependency
this is my vite.config.js:

import typescript from "@rollup/plugin-typescript";
import react from "@vitejs/plugin-react";
import { glob } from "glob";
import path from "path";
import { extname, relative } from "path";
import { fileURLToPath } from "url";
import { type PluginOption, defineConfig } from "vite";
import dts from "vite-plugin-dts";
import { visualizer } from "rollup-plugin-visualizer";
import pkg from "./package.json";
const __dirname = path.dirname(fileURLToPath(import.meta.url));

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    typescript() as PluginOption,
    dts({ include: ['lib'], exclude: ['lib/**/**/*.{stories,spec,test}.{ts,tsx}'] }),
    visualizer({
      open: true,
      filename: "stats.html",
      gzipSize: true,
      brotliSize: true,
    }) as PluginOption,
  ],
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "lib") }]
  },
  build: {
    lib: {
      formats: ["es"],
      entry: [path.resolve(__dirname, "lib/index.ts")],
    },
    rollupOptions: {
      external: [...Object.keys((pkg as any).dependencies || {}), ...Object.keys((pkg as any).devDependencies || {})],
      input: Object.fromEntries(
        glob
          .sync("lib/**/*.{ts,tsx}", {
            ignore: [
              "lib/**/*.d.ts",
              "lib/**/**/*.{stories,spec,test}.{ts,tsx}",
            ]
          })
          .map((file) => [
            relative("lib", file.slice(0, file.length - extname(file).length)),
            fileURLToPath(new URL(file, import.meta.url))
          ]),
      ),
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
});

If you faced thisissue before or if you have any experience or strategies for makeing build size small, please help me!

Thanks!

What I did is I tries to use rollup-plugin-visualizer and this is the result, and the button size on rollup-plugin-visualizer is 2kb but when I import it I found that it is 400k gzipped: 187.8k