[docs] Modularize Imports for Nextjs #35457

dev-ahmedhany · 2022-12-13T10:04:42Z

Signed-off-by: Ahmed Hany [email protected]

I have followed (at least) the PR section of the contributing guide.

mui#35450 Signed-off-by: Ahmed Hany <[email protected]>

mui-bot · 2022-12-13T10:07:25Z

	Messages
📖	Netlify deploy preview: https://deploy-preview-35457--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 4ddd6de

Janpot · 2022-12-13T16:14:59Z

Gave this a quick try on Toolpad and this breaks on imports like:

import { Box, styled } from '@mui/material'

As there is no @mui/material/styled. Perhaps it should only be done for @mui/icons-material?

dev-ahmedhany · 2022-12-13T16:51:28Z

@Janpot
but @mui/material is also at the docs

'babel-plugin-direct-import',
      { modules: ['@mui/material', '@mui/icons-material'] },

michaldudak · 2022-12-14T10:49:14Z

Could you add it as Option 3, after a Babel plugin?

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

…ndle-size.md Co-authored-by: Michał Dudak <[email protected]> Signed-off-by: Ahmed Hany <[email protected]>

michaldudak · 2022-12-21T15:06:11Z

Good catch, @Janpot. I see that the Babel plugins also fail to import styled from @mui/material. I suppose your suggestion to apply this only to @mui/icons-material makes the most sense. CC @mui/core

oliviertassinari · 2023-01-04T17:20:58Z

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  ...
+  experimental: {


It doesn't seems to be under experimental in https://nextjs.org/docs/advanced-features/compiler#modularize-imports

It's recently promoted

oliviertassinari · 2023-01-04T17:21:39Z

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

+      '@mui/material': {
+        transform: '@mui/material/{{member}}'
+      },


I wouldn't do this, this is probably overkill. There are also cases where it doesn't work because the code is not consistent enough.

oliviertassinari · 2023-01-04T19:18:28Z

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -194,6 +194,31 @@ Modify your `package.json` commands:
  }
 ```

+If you are using Next.js >= v12.1.1, you can make use of their [Modularize Imports](https://nextjs.org/docs/advanced-features/compiler#modularize-imports) feature.


This section of the docs starts to be quite long. I think that it could be good to change the headers to help navigate the content.

oliviertassinari · 2023-01-08T21:11:03Z

I think that it would be great to update the /examples so that developers get this optimization by default.

michaldudak · 2023-01-09T11:39:46Z

@dev-ahmedhany, to sum up - if you'd like to continue with this PR, please remove the instructions for @mui/material imports (only leave @mui/icons-material). Also, remove the experimental field and update the Next version to 13.1.

dev-ahmedhany · 2023-01-12T04:48:04Z

@michaldudak done

michaldudak · 2023-01-12T08:29:26Z

Thanks. Please merge in the latest master, this should resolve the failing checks. Also, as @oliviertassinari pointed out, it would be great to update the examples to use this feature (/examples/nextjs and /examples/nextjs-with-typescript).

zigang93 · 2023-03-03T06:44:31Z

How about @mui/x-data-grid example ? hit some error with the config below:

modularizeImports: {
    '@mui/x-data-grid': {
      transform: '@mui/x-data-grid/{{member}}',
    },
    '@mui/x-date-pickers': {
      transform: '@mui/x-date-pickers/{{member}}',
    },
  },

oliviertassinari · 2023-03-05T18:22:49Z

How about @mui/x-data-grid example

@zigang93 These are already one npm package per "component" (not in the React definition, from the perspective of end-users), there isn't as much value to modularizing imports as with icons.

https://bundlephobia.com/package/@mui/[email protected] the main component is 70% of the bundle size. I think that it makes more sense to look into tree-shaking. Right now, modularizing imports makes little sense. cc @cherniavskii
https://bundlephobia.com/package/@mui/[email protected] has more tree-shaking opportunities, and we took advantage of it to support deep imports. If you have there specific errors with the date pickers, please open an issue on https://github.com/mui/mui-x. cc @flaviendelangle

In any case, we also need to modularize all the internal imports: #35840.

cherniavskii · 2023-03-22T17:52:09Z

bundlephobia.com/package/@mui/[email protected] the main component is 70% of the bundle size. I think that it makes more sense to look into tree-shaking. Right now, modularizing imports makes little sense.

@oliviertassinari Yeah, I think most of the data grid's code is imported anyway, there are only a few components/hooks that are optional (like GridToolbar).
Regarding the tree-shaking, do you have any specific issues in mind?

oliviertassinari · 2023-03-22T22:38:43Z

Regarding the tree-shaking, do you have any specific issues in mind?

@cherniavskii I'm thinking of mui/mui-x#7358, and #35840 for the data grid.

oliviertassinari · 2023-06-29T00:39:28Z

I wonder what we should do with this PR considering vercel/next.js#50900.

Fixes #51872. We were exploring in mui/material-ui#35457 the option to move the `modularizeImports` config to our Next.js examples to fix mui/material-ui#35450 however, we never got to complete the work. We are not yet in a position where we can apply modularizeImports to `@mui/material`. We still have folders to create to make it work. Maybe we should close mui/material-ui#35457? Co-authored-by: JJ Kasper <[email protected]>

michaldudak · 2023-08-09T07:59:52Z

If I understand it correctly, this is applied by default by Next.js and doesn't require additional configuration. I believe we can close this PR.

oliviertassinari · 2023-08-09T10:13:11Z

I reverted one of those: vercel/next.js#51953

michaldudak · 2023-08-11T08:16:39Z

This PR is related only to icons-material, so the code you reverted doesn't affect it, does it?

oliviertassinari · 2023-08-13T17:19:07Z

This PR is related only to icons-material, so the code you reverted doesn't affect it, does it?

@michaldudak Agree. I also agree that we can close this PR.

However, the opportunity I see is we could open a new issue so we can scale this to all the MUI npm packages, beyond @mui/icons-material. It could be done with special rules, like in https://github.com/vercel/next.js/blob/261db496f7cf04b70f078a6eae0c8baf6fe5c238/packages/next/src/server/config.ts#L738. I didn't have time in vercel/next.js#51953 to do it right, there was an urgency to fix it before it was rolled from their canary release to stable. Then, the question is is the Next.js job to keep this up to date? Is there a similar opportunity with Vite, should we update the Vite example as well? At the end of the day, it's about improving the DX.

[docs] Modularize Imports for Nextjs

a301bfa

mui#35450 Signed-off-by: Ahmed Hany <[email protected]>

zannager added the docs Improvements or additions to the documentation label Dec 13, 2022

michaldudak reviewed Dec 14, 2022

View reviewed changes

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md Outdated Show resolved Hide resolved

Update docs/data/material/guides/minimizing-bundle-size/minimizing-bu…

c3fc875

…ndle-size.md Co-authored-by: Michał Dudak <[email protected]> Signed-off-by: Ahmed Hany <[email protected]>

dev-ahmedhany requested a review from michaldudak December 23, 2022 16:21

oliviertassinari reviewed Jan 4, 2023

View reviewed changes

docs modularize Imports for nextjs remove expermintal

4ddd6de

dev-ahmedhany requested review from Janpot and michaldudak and removed request for michaldudak and Janpot January 10, 2023 11:32

This was referenced Jan 15, 2023

fix: reduce MUI size by using @swc/plugin-transform-imports TexteaInc/json-viewer#169

Merged

[core] Flatten imports to speed up webpack build & node resolution #35840

Open

oliviertassinari added performance external dependency Blocked by external dependency, we can’t do anything about it labels Jan 17, 2023

oliviertassinari mentioned this pull request May 21, 2023

[examples] Next.js v13 app router with Material UI #37315

Merged

1 task

nereuseng mentioned this pull request May 25, 2023

[docs] Adding tree shaking guide for SWC compiler #36456

Closed

1 task

oliviertassinari mentioned this pull request Jun 29, 2023

fix modularizeImports with @mui/material vercel/next.js#51953

Merged

michaldudak closed this Aug 31, 2023

michaldudak mentioned this pull request Aug 31, 2023

[core] Define rules to modularize packages in Next.js #38736

Open

samuelsycamore added the nextjs label Oct 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Modularize Imports for Nextjs #35457

[docs] Modularize Imports for Nextjs #35457

dev-ahmedhany commented Dec 13, 2022 •

edited by oliviertassinari

Loading

mui-bot commented Dec 13, 2022 •

edited

Loading

Janpot commented Dec 13, 2022 •

edited

Loading

dev-ahmedhany commented Dec 13, 2022

michaldudak commented Dec 14, 2022

michaldudak commented Dec 21, 2022 •

edited

Loading

oliviertassinari Jan 4, 2023

Janpot Jan 4, 2023

oliviertassinari Jan 4, 2023 •

edited

Loading

oliviertassinari Jan 4, 2023

oliviertassinari commented Jan 8, 2023

michaldudak commented Jan 9, 2023

dev-ahmedhany commented Jan 12, 2023

michaldudak commented Jan 12, 2023

zigang93 commented Mar 3, 2023

oliviertassinari commented Mar 5, 2023 •

edited

Loading

cherniavskii commented Mar 22, 2023

oliviertassinari commented Mar 22, 2023 •

edited

Loading

oliviertassinari commented Jun 29, 2023

michaldudak commented Aug 9, 2023

oliviertassinari commented Aug 9, 2023

michaldudak commented Aug 11, 2023

oliviertassinari commented Aug 13, 2023 •

edited

Loading

[docs] Modularize Imports for Nextjs #35457

[docs] Modularize Imports for Nextjs #35457

Conversation

dev-ahmedhany commented Dec 13, 2022 • edited by oliviertassinari Loading

mui-bot commented Dec 13, 2022 • edited Loading

Janpot commented Dec 13, 2022 • edited Loading

dev-ahmedhany commented Dec 13, 2022

michaldudak commented Dec 14, 2022

michaldudak commented Dec 21, 2022 • edited Loading

oliviertassinari Jan 4, 2023

Choose a reason for hiding this comment

Janpot Jan 4, 2023

Choose a reason for hiding this comment

oliviertassinari Jan 4, 2023 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Jan 4, 2023

Choose a reason for hiding this comment

oliviertassinari commented Jan 8, 2023

michaldudak commented Jan 9, 2023

dev-ahmedhany commented Jan 12, 2023

michaldudak commented Jan 12, 2023

zigang93 commented Mar 3, 2023

oliviertassinari commented Mar 5, 2023 • edited Loading

cherniavskii commented Mar 22, 2023

oliviertassinari commented Mar 22, 2023 • edited Loading

oliviertassinari commented Jun 29, 2023

michaldudak commented Aug 9, 2023

oliviertassinari commented Aug 9, 2023

michaldudak commented Aug 11, 2023

oliviertassinari commented Aug 13, 2023 • edited Loading

dev-ahmedhany commented Dec 13, 2022 •

edited by oliviertassinari

Loading

mui-bot commented Dec 13, 2022 •

edited

Loading

Janpot commented Dec 13, 2022 •

edited

Loading

michaldudak commented Dec 21, 2022 •

edited

Loading

oliviertassinari Jan 4, 2023 •

edited

Loading

oliviertassinari commented Mar 5, 2023 •

edited

Loading

oliviertassinari commented Mar 22, 2023 •

edited

Loading

oliviertassinari commented Aug 13, 2023 •

edited

Loading