Slow render when using Vite + Pigment + Icons

[iM-GeeKy]

Steps to reproduce

Link to live example: https://github.com/iM-GeeKy/material-ui-pigment-css-vite-ts

Steps:

1. bun install
2. bun run dev

Current behavior

Local site takes an extremely long amount of time to render (@mui/icons-material appears to be the main culprit).

Expected behavior

Importing @mui/icons-material should not cause such a massive start up time.

Context

Using examples/material-ui-pigment-css-vite-ts as a starting point and in an effort to upgrade my internal application from v5 to v6, the same code in the App.tsx rendered extremely quickly, but the same code after migrated takes several minutes. Consequently, Vitests appear to run out of memory which appears to be related to the same long render problem. My guess is it's pulling in the entire icon library, but following the minimizing bundle size docs didn't seem to resolve the issue. Any help would be greatly appreciated.

Your environment

npx @mui/envinfo

 (Using Chrome)
  Browsers:
    Chrome: 128.0.6613.114
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: latest => 11.13.3 
    @emotion/styled: latest => 11.13.0 
    @mui/base:  5.0.0-beta.58 
    @mui/core-downloads-tracker:  6.0.1 
    @mui/icons-material: latest => 6.0.1 
    @mui/lab: latest => 6.0.0-beta.8 
    @mui/material: latest => 6.0.1 
    @mui/material-pigment-css: latest => 6.0.1 
    @mui/private-theming:  6.0.1 
    @mui/styled-engine:  6.0.1 
    @mui/system:  6.0.1 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.1 
    @pigment-css/react:  0.0.21 
    @pigment-css/vite-plugin: latest => 0.0.21 
    @types/react: latest => 18.3.5 
    react: latest => 18.3.1 
    react-dom: latest => 18.3.1 
    typescript: latest => 5.5.4 

Search keywords: Icons, Vite, Pigment

[brijeshb42]

I changed the first line of import to

import CheckCircle from '@mui/icons-material/CheckCircle';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';

Could you try with this change? Also, could you share how slow the build actually is ?

[iM-GeeKy]

@brijeshb42 Using the repository above, simply changing the import resulted in

I'm working on getting a video of the slow startup time. I'll add it here once I'm finished.

[iM-GeeKy]

@brijeshb42 Here is the slow initial render (apologies for the awful quality, it's just 4 minutes of loading so I had to reduce the quality in order to upload it...). As a result of the long startup, my guess is with vitests it is running out of memory since the initial render takes so long.

test.mov

Here is a much faster initial render simply by commenting out the import of the icons and the areas where it is used.

test2.mov

[brijeshb42]

Could you try updating your vite config to this -

export default defineConfig({
  plugins: [react(), pigment(pigmentConfig)],
  resolve: {
    alias: [
      {
        find: /^@mui\/icons-material\/(.*)/,
        replacement: '@mui/icons-material/esm/$1',
      },
    ],
  },
});

We have an upcoming change in the icons package to natively support this. Once that lands, you won't need this explicit resolve config.

[iM-GeeKy]

@brijeshb42 The config change above doesn't appear to resolve the issue.

[brijeshb42]

a.patch
Here's all the changes I had made. Please try that. I am able to open the dev url immediately.
Even the full build is being done in 3-4 seconds.

[iM-GeeKy]

@brijeshb42 This looks like it resolved the issue. I was only able to quickly test it but will be doing a more thorough investigation in the following days. Thanks!

[brijeshb42]

Ok. Feel free to close the issue if it's resolved.

[iM-GeeKy]

a.patch Here's all the changes I had made. Please try that. I am able to open the dev url immediately. Even the full build is being done in 3-4 seconds.

Patch works well. Thanks!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @iM-GeeKy! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!