Terrible Performance on lucide-solid library

[FelipeEmos]

Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• source/main
• other/not relevant

Version

0.427.0

Can you reproduce this in the latest version?

• Yes
• No

Browser

• Chrome/Chromium
• Firefox
• Safari
• Edge
• iOS Safari
• Opera
• Other/not relevant

Operating system

• Windows
• Linux
• macOS
• ChromeOS
• iOS
• Android
• Other/not relevant

Description

The lucide-solid lib is with a terrible performance because it is loading all the icons instead of only the ones the project is using...

I created 2 repos to compare both lucide-solid and lucide-react and the performance difference is really big.

These repos were set up the same way, I used bun create vite@latest, deleted everything in the App.tsx and just added one icon.

Results

Benchmark Repo	Lucide React	Lucide Solid
Time	250 ms	3500 ms
Amount of Icons being loaded	1	all of them
Screenshots

Steps to reproduce

Just import any icon in a Vite SolidJS project from the lucide-solid library and see the Lighthouse Network tab

Checklist

• I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

[FelipeEmos]

Oh, I've just realized after continuing my search on the topic that this is probably a known issue... there's a section in the docs where it says

Tree-shaking is only available in these packages: lucide, lucide-react, lucide-vue, lucide-vue-next, lucide-angular, lucide-preact

I'm assuming that's exactly what's going on here... anyhow, is it too difficult to implement? Maybe I could give it a shot...

Any tips or resources would be appreciated.

[jamiemlaw]

There is an article at https://christopher.engineering/en/blog/lucide-icons-with-vite-dev-server/ that proposes a workaround. Hope it helps.

[FelipeEmos]

@jamiemlaw thank you for the amazing resource!
I had no idea this was a Vite's deliberate feature not to Tree Shake when on DEV mode... ok then.

Although the article's workaround works, it unfortunately breaks Typescript so I'm not considering it seriously. I'd rather do the manual boring work of copy pasting the SVG's I need and maintain my own icon components.

But there's a real opportunity to improve the library here, and it doesn't seems so hard.
I'm really curious on how the lucide-react side of things works 🤔
I read the code and it's small and seems simple.

Cus if it's a VITE problem (and apparently on lucide-react it's been fixed by using some clever code generation technique), then there is no reason why almost the same approach wouldn't work for lucide-solid.

Porting the newest version of lucide-react to lucide-solid seems something I could do. Maybe by the time lucide-solid was ported this tree shaking thing was still an issue?

[ericfennis]

@jamiemlaw
Maybe something has changed on the Vite side, not sure.
lucide-solid can't be directly compared to lucide-react since Solid is a compiled framework like Svelte. This means that the compiler can't handle pre-transpiled script files like React does, and all the files that shipped with this package are uncompiled. Also Solid Start uses different script files then normal Solid+Vite setup what it made it even more complicated.

Our build process is based on the rollup-preset-solid, but looks like we might go even more custom on this.

Thanks for reporting. I'm looking into it.

[FelipeEmos]

Hi, @ericfennis, I don't wanna bother and I'm grateful for your work!

But unfortunately I think we should reopen the issue.
I've just tried upgrading the library on my DEMO that I used to showcase the issue and it persists exactly the same.

• https://github.com/FelipeEmos/lucide-solid-test

I hope I did something wrong with the test but it's pretty straight forward... I upgraded the lib to the latest version (0.452.0), your fix got in on 0.433.0 and the problem persists

I then tested on exactly the version the fix got in ( in case there was any regression going on ) but it didn't work either

[vincehi]

Me to

[jguddas]

Might be interesting, the vite peopel are working on a rewrite of the bundler, it's called rolldown and will hopefully fix a lot of performance problems.

Maybe someone wants to give it a try, maybe we don't have the issue with vite-rolldown?

There was also a good talk about the internal reworkings of the bundlers at viteconf https://youtu.be/IjV0tLysXc0