Large Bundle Size + Modules

[kevinmitch14]

Hey team, I have been playing around with Tremor and noticed that hot reload times really increased. After doing a bit of digging I found that the bundle size is quite large.

The bundle seems to increase by the same amount regardless if one component is being used or all components are being used.

In my Next.js v13.4.4 build, the page size in /app dir increases by about 318.6kb. This is the case if I just use <CategoryBar /> or if I use <CategoryBar /> along with other components such as <Legend /> and <Button />.

Is this expected behaviour, is there any recommendations to reduce this bundle size/the # of modules when compiling? If this is unexpected, I can create a small repo for you!

[pingustar]

given that the documentation says to add the whole tremor library to be purged by tailwind, I assume we are adding all styles for all components, even if you use none, one or all tremor components

in tailwind.config.js you have this line:

"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // Tremor module

you could try to do some tree-shaking type of inclusion of the styles...

eg.

"./node_modules/@tremor/react/dist/components/input-elements/Button/**/*.{js,ts,jsx,tsx}", // Button component

I have not tested this, and it is pretty much the reason I did not decide to use tremor even though I think it is pretty cool!

[mitrotasios]

thanks for pointing this out, we'll have a look on how we can reduce the overhead.

[dvrfluxchat]

import Metric from "@tremor/react/dist/components/text-elements/Metric/Metric";
import Tab from "@tremor/react/dist/components/input-elements/Tabs/Tab";
import TabGroup from "@tremor/react/dist/components/input-elements/Tabs/TabGroup";
import TabList from "@tremor/react/dist/components/input-elements/Tabs/TabList";

This works for me. Facing the same issue.