Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[system] Fix build size with material-ui-nextjs #40436

Merged
merged 2 commits into from
Jan 6, 2024

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jan 5, 2024

Fix #40203

The root cause comes from the import of next/document in the same file as AppCacheProvider which includes unnecessary javascript to the output of _app.js.

Fixed by splitting the files into document and app files.

Before:
image

After:
image

Testing

  • clone the material-ui-nextjs-pages-router-ts example

    curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-nextjs-pages-router-ts
    cd material-ui-nextjs-pages-router-ts
  • Run yarn && yarn build to see the issue (similar to Before image)

  • Open package.json and replace the @mui/material-nextjs version with https://pkg.csb.dev/mui/material-ui/commit/2d5cbbca/@mui/material .

  • Delete the .next folder and run yarn && yarn build again (the bundle size should be green)


@siriwatknp siriwatknp added bug 🐛 Something doesn't work package: material-ui Specific to @mui/material nextjs labels Jan 5, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 5, 2024
@mui-bot
Copy link

mui-bot commented Jan 5, 2024

Netlify deploy preview

https://deploy-preview-40436--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 2d5cbbc

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 5, 2024
@siriwatknp siriwatknp marked this pull request as ready for review January 5, 2024 09:17
@siriwatknp siriwatknp merged commit 5518265 into mui:master Jan 6, 2024
19 checks passed
@oliviertassinari oliviertassinari changed the title [material-ui-nextjs] Fix build size [system] Fix build size with material-ui-nextjs Jan 7, 2024
@oliviertassinari oliviertassinari added package: system Specific to @mui/system and removed package: material-ui Specific to @mui/material labels Jan 7, 2024
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Jan 9, 2024
@songhobby
Copy link

After upgrading the package, there is typescript error which says the module "@mui/material-nextjs" doesn't exist

@mnajdova
Copy link
Member

mnajdova commented Mar 1, 2024

@songhobby have you created issue about it? It's hard to follow notifications on closed PRs. cc @siriwatknp in case you missed the notification too. Apologies if it has been resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work nextjs package: system Specific to @mui/system performance
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[material-ui] 49kb bundle size increase with the new Next.js integration package
5 participants