I have project(called A) built with remix/vite, and it include my other library(called B) built based on storybook and vite. Both A and B have installed @tabler/icons-react as dev dependency.

When I build library B itself, the tabler icons are doing okay, only include icons been imported in the build. But when I build the project A, all of the tabler icons in B are all transforming and packed into build/client/assets/B.js. It occupied a huge bundle size. I’m not sure if this is related to treeshaking or some configs? Hope someone can help me on this! Thanks in advance.

Project A vite config:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import mdx from "@mdx-js/rollup";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  ssr: {
    noExternal: ["pdfmake/build/vfs_fonts" /* , "dc" */],
  },

  plugins: [
    mdx({
      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
    }),
    remix(),
    tsconfigPaths(),
    visualizer({
      open: true,
      gzipSize: true,
      template: "treemap",
    }),
  ],
});

Library B vite config:

import { defineConfig } from 'vite'
import { resolve } from 'path'
import react from '@vitejs/plugin-react'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import ignore from 'rollup-plugin-ignore'
import dts from 'vite-plugin-dts'
import * as packageJson from './package.json'
import dynamicImport from 'vite-plugin-dynamic-import'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
    plugins: [
        visualizer({ open: true, gzipSize: true }),
        react(),
        ignore(['moment', 'moment-timezone']),
        dts({
            include: ['src'],
        }),
        dynamicImport(),

        viteStaticCopy({
            targets: [
                {
                    src: 'tailwind.config.js',
                    dest: '',
                },
                {
                    src: 'node_modules/@fontsource/inter/files/*400*',
                    dest: 'files',
                },
            ],
        }),
    ],
    build: {
        minify: true,
        copyPublicDir: false,
        lib: {
            entry: resolve(__dirname, 'src/index.tsx'),
            name: 'custom-components',
            formats: ['es', 'cjs'],
            fileName: format => `custom-components.${format}.js`,
        },
        rollupOptions: {
            external: [
                ...Object.keys(packageJson.devDependencies),
                ...Object.keys(packageJson.peerDependencies),
                'moment',
                'moment-timezone',
                '@fontsource/inter',
            ],
            output: {
                sourcemap: false,
                compact: false,
            },
        },
    },
})

The build in remix/vite ‘/build/client/libB.blabla.js’ should exclude tabler-icons, only include the one imported and used. Which should be around 4mb smaller