Treeshaking (import on demand) for component library

[bilalbhojani24]

I am working on creating a react component library using Vite and rollup as a module bundler.

Problem:- I have 50 components in the library(design-system) and many 3rd party packages and the size of my library is 3MB where my code is 0.8MB and 2.2MB is vendor code. I am bundling everything in a single file, so my library is getting used by another library/app even if 1 component is used from my package whole package size includes the size of design-system.

Analysis:- My code of 50 components is getting treeshaked, but vendor code is minified and not getting treeshaked.

Expected Behavior:-
I am trying to achieve to create a separate file for each component so that the file should contain all needed packages and minified code. Something like import on demand so whenever that component gets rendered, that file should be loaded on go like antd or mui does.

What I have tried?

1. I tried the approach of preserveModule, but it doesn't work as expected for some external libraries like react-syntax-highlighter or react-player, etc.

Current vite config of design-system library:-

import { resolve } from 'path';
import { defineConfig, mergeConfig } from 'vite';
import { dependencies } from './package.json';

const { packageViteConfig } = require('@company/vite-config');
const react = require('@vitejs/plugin-react');

const defaultConfig = {
 plugins : [react()],
  build: {
    lib: {
      entry: resolve('./index.js'),
      name: 'design-sys-lib',
      formats: ['es'],
      fileName: () => `index.js`
    },
    rollupOptions: {}
  }
};

const config = defineConfig(mergeConfig(packageViteConfig, defaultConfig));

export default config;

[sadn1ck]

If I am understanding correctly, for that you'll need to pass each component as an entry point to build.lib.entry. You can use glob and construct the entry files array.

Take a look at this blog (coincidentally which I checked today, fun).

also do check out the comments on the blog for some drawbacks wrt usage in nextjs

Warning

You should mark as external any dependency that you expect the consumer to provide (for example, react, react-dom, etc). I don't see that in the config so just confirming

[bilalbhojani24]

Hi, Thank you for the above blog. I did exact same thing and this solution worked for me. I am just curious on part how can we do something similar with single bundled file, if it's not possible Vite should mention in its documentation about this.

[sadn1ck]

I think you will have to set sideEffects key in package.json of the library for consuming bundlers to know that they can tree shake reliably. I might be wrong on this

[Akkuma]

sideEffects also doesn't seem to improve the situation. The only solution is to not actually follow the documentation as @bilalbhojani24 pointed out as it frankly should be considered wrong documentation by the slew of issues around this.

[Akkuma]

As an aside the documentation in the blog can be updated to use entry in lib mode as well.

const entries = new Map<string, string>()
for (const file of glob.sync( '[INSERT_GLOB_PATH_HERE]')) {
	const fileName = file.split('/').at(-1)?.split('.')[0]
	if (!fileName) continue;

	entries.set(`[INSERT_OUTPUT_PATH]/${fileName}`,  fileURLToPath(new URL(file, import.meta.url)))
}

// Add any additional entries
entries.set('index', './src/index.ts')

// in the defineConfig
build: {
  lib: {
	entry: Object.fromEntries(entries),
	formats: ['es'],
	fileName: '[name]'
  },
  rollupOptions: {
	external: ['react', 'react-dom', 'react/jsx-runtime', 'tailwindcss', 'tailwindcss-animate'],
  },
  target: 'esnext',
  sourcemap: true,
  emptyOutDir: true,
},