ugly-tan
ugly-tan2y ago

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:
┌ /_app 0 B 551 kB
├ λ /[[...refine]] 249 B 551 kB
└ ○ /404 184 B 551 kB
+ First Load JS shared by all 551 kB
├ chunks/framework-305dbdef56d67aa9.js 45.4 kB
├ chunks/main-a8eaa706e962a5d6.js 27.9 kB
├ chunks/pages/_app-1e8eb2bf899090b0.js 476 kB
└ chunks/webpack-44567bfec3a37904.js 1.05 kB
┌ /_app 0 B 551 kB
├ λ /[[...refine]] 249 B 551 kB
└ ○ /404 184 B 551 kB
+ First Load JS shared by all 551 kB
├ chunks/framework-305dbdef56d67aa9.js 45.4 kB
├ chunks/main-a8eaa706e962a5d6.js 27.9 kB
├ chunks/pages/_app-1e8eb2bf899090b0.js 476 kB
└ chunks/webpack-44567bfec3a37904.js 1.05 kB
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:
┌ /_app 0 B 292 kB
├ λ /[[...refine]] 249 B 292 kB
└ ○ /404 184 B 292 kB
+ First Load JS shared by all 292 kB
├ chunks/framework-305dbdef56d67aa9.js 45.4 kB
├ chunks/main-a8eaa706e962a5d6.js 27.9 kB
├ chunks/pages/_app-432b4edb6ea69894.js 217 kB
└ chunks/webpack-44567bfec3a37904.js 1.05 kB
┌ /_app 0 B 292 kB
├ λ /[[...refine]] 249 B 292 kB
└ ○ /404 184 B 292 kB
+ First Load JS shared by all 292 kB
├ chunks/framework-305dbdef56d67aa9.js 45.4 kB
├ chunks/main-a8eaa706e962a5d6.js 27.9 kB
├ chunks/pages/_app-432b4edb6ea69894.js 217 kB
└ chunks/webpack-44567bfec3a37904.js 1.05 kB
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
ugly-tan
ugly-tan2y ago
The other thing is, I'm currently importing material ui with named exports:
import { Button } from "@pankod/refine-mui";
import { Button } from "@pankod/refine-mui";
but material ui suggests to import it with default export to reduce the bundle size:
import Button from "@pankod/refine-mui/Button";
import Button from "@pankod/refine-mui/Button";
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.
passive-yellow
passive-yellow2y ago
Thank you for reporting this. Let's check and answer. 🚀 Can you please open an issue for this?
ugly-tan
ugly-tan2y ago
Sure
ugly-tan
ugly-tan2y 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 ├ λ /[[....
passive-yellow
passive-yellow2y ago
Thank you @amirhhashemi 🚀