Best Practice to build Shadcn Dashboards (Performance, Lazy Loading)
Hi,
I did some tests with the vanilla Shadcn dashboard and the TanStack starter.
What can be done so that the client reacts immediately and loads the rest lazily to improve the initial load performance? It currently takes about 5 seconds (loading around 90 MB) before the UI becomes responsive.
https://codesandbox.io/p/sandbox/github/regenrek/tanstack-dash-perf
https://github.com/regenrek/tanstack-dash-perf
GitHub
GitHub - regenrek/tanstack-dash-perf
Contribute to regenrek/tanstack-dash-perf development by creating an account on GitHub.
12 Replies
quickest-silver•5mo ago
is this during dev or prod?
initial-roseOP•5mo ago
dev of course 🙂
can i test this quickly somehow on prod (with a build)
quickest-silver•5mo ago
just build and run locally?
initial-roseOP•5mo ago
TanStack Start | Type-Safe, Client-First, Full-Stack React Framework
TanStack Start is a type-safe, client-first, full-stack React framework.
initial-roseOP•5mo ago
its fast enough
quickest-silver•5mo ago
it's probably a vite dev thing you see here
passive-yellow•5mo ago
i remember someone here who had an issue with @tabler/icons-react where it imports all icons in dev, including those that arent being used
lucide works fine though
initial-roseOP•5mo ago
yes, that's what i thought too. tabler loads a lot of icons here. Let me see if I find this
initial-roseOP•5mo ago
initial-roseOP•5mo ago
Found it: https://discord.com/channels/719702312431386674/1357733042915119155/1357899787785207990
Well of course you can remove them but if people want to use shadcn blocks they will run into it.
Any ideas?
But prod build works fine its pretty fast
passive-yellow•5mo ago
GitHub
Vite dev mode loads all icon chunks with 3.19.0 (React) · Issue #1...
Description Using the new 3.19.0 version of the react package breaks dev mode. After importing any one icon into a component, vite will start loading all the icon chunks (takes about 10 seconds on ...
initial-roseOP•5mo ago
Looks promising 👌