themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.85k stars 416 forks source link

[perf] Export theme.ts / create-theme directly #1489

Open theogravity opened 1 week ago

theogravity commented 1 week ago

Development under Next.js slows down in dev mode initial startup when importing from the root flowbite-react because it has to compile all exports since we're importing directly from flowbite-react.

It would really help if theme.ts can be directly imported:

https://github.com/themesberg/flowbite-react/blob/main/packages/ui/src/theme.ts

And same with the helpers / create-theme:

https://github.com/themesberg/flowbite-react/blob/main/packages/ui/src/helpers/create-theme.ts

For reference, see:

https://github.com/vercel/next.js/issues/48748

Quote:

react-icons, material icons, etc. Most of these libraries publish barrel files with a lot of re-exports. E.g. material-ui/icons ships 5500 module re-exports, which causes all of them to be compiled. You have to add modularizeImports to reduce it, here's an example: https://github.com/vercel/next.js/issues/45529#issuecomment-1531912811

Unfortunately, optimizePackageImports / modularizeImports doesn't work as it claims to that we had to refactor out react-icons and use the specific icon library that we were using out of it. Now we're seeing the same issues with flowbite-react. The refactor out of react-icons saved us around 40s of initial startup time, and we're seeing around 5-10s with flowbite-react.

Anything that isn't exported directly should be so we can directly reference it instead of the main flowbite-react import.

theogravity commented 1 week ago

I also see a reference to react-icons in the bundler that also may contribute to compile times too, so just adding support for more direct imports may not fix the issue entirely.

rluders commented 1 week ago

Probably related to (some performance issues, and react-icons)

1197 #1447

theogravity commented 1 week ago

This report is with optimizePackageImports: ["flowbite-react"] being used. I'm on Next.js 15 RC if that matters.