material-ui
material-ui copied to clipboard
Next JS 13.4 appDir - MUI Compiled /page in 8.2s (2728 modules)
I am using "@mui/material": "5.14.13" and "next": "13.5.4" but during development and also build is slow I saw another topic that was discussing this issue but I couldn't find any answer that will work I also tried flatten import example from this:
import { Box } from "@mui/material";
to this:
import Box from "@mui/material/Box";
this reduces first load js but again its not how it should be, again it loads 2728 modules.
this is screenshot when I run yarn dev:
this is documentation that I followed to implement MUI in next js: MUI DOC
please don't close this until it has solution this is headache.
@siriwatknp any update for this issue.
Are you using the modularizeImports
option? We need a reproduction repository so that we can investigate what is the problem. Without it we cannot act on anything.
@mnajdova you can replicate this problem by just creating pure Next Js project and try to implement MUI app dir structure following this
Also the same problem encountering many users:
Vercel discussion another topic for same problem
I have tried modularizeImports but again its not how it should be.
modularizeImports: {
"@mui/material/?(((\\w*)?/?)*)": {
transform: "@mui/material/{{ matches.[1] }}/{{member}}",
skipDefaultConversion: true,
},
},
Also Next JS has introduced optimizePackageImports but again it has problems LINK
This is a screenshot from Webpack Bundle Analyzer:
As I know MUI uses tree-shaking (Tree-shaking Material UI works out of the box in modern frameworks. )
Is this problem from barrel index file's or not. What we can do to resolve this issue I think this issue should have priority on MUI as Next JS is very popular framework.
This looks like a duplicate of #35840 to me.
I don't see much to do about it, barrel indexes are slow: https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/. And maybe Next.js made it faster in https://vercel.com/blog/how-we-optimized-package-imports-in-next-js:
but Vite, etc. didn't.