extended-salmon•2y 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

extended-salmon•2y 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.

other-emerald•2y ago

Thank you for reporting this. Let's check and answer. 🚀 Can you please open an issue for this?

extended-salmon•2y ago

Sure

extended-salmon•2y 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 ├ λ /[[....

other-emerald•2y ago

Thank you @amirhhashemi 🚀