equal-jade
equal-jade•3y 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
equal-jade
equal-jadeOP•3y 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.
like-gold
like-gold•3y ago
Thank you for reporting this. Let's check and answer. 🚀 Can you please open an issue for this?
equal-jade
equal-jadeOP•3y ago
Sure
equal-jade
equal-jadeOP•3y ago
Done https://github.com/refinedev/refine/issues/3357
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 ├ λ /[[....
like-gold
like-gold•3y ago
Thank you @amirhhashemi 🚀

Did you find this page helpful?