Reducing bundle size
The bundle size of my Refine app built with Next.js and Material UI is very high and the app is very slow. I'm looking for ways to reduce the bundle size. This is the bundle:
As you can see
_app.tsx
is very heavy and it effects the whole app performance. How can I reduce it?
One thing I tried was to remove resource page components to see the result:
The fact that I have to import all resource pages in the _app.tsx
file has a significant effect to bundle size and speed of the app. Is there a way to fix it?5 Replies
ratty-blush•2y ago
The other thing is, I'm currently importing material ui with named exports:
but material ui suggests to import it with default export to reduce the bundle size:
But it's not possible with
@pankod/refine-mui
. Does that effect the bundle size? I guess tree-shaking takes care of that but I'm not sure.itchy-amethyst•2y ago
Thank you for reporting this. Let's check and answer. 🚀
Can you please open an issue for this?
ratty-blush•2y ago
Sure
ratty-blush•2y ago
GitHub
[FEAT] Reduce bundle size in Next.js (with Material UI) · Issue #33...
Is your feature request related to a problem? Please describe. The bundle size of my Refine app built with Next.js and Material UI is very high and the app is very slow: ┌ /_app 0 B 551 kB ├ λ /[[....
itchy-amethyst•2y ago
Thank you @amirhhashemi 🚀