Closed iM-GeeKy closed 1 week ago
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 ?
@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.
@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.
https://github.com/user-attachments/assets/bc7ea11d-a23a-4333-b5be-cdee705dff1c
Here is a much faster initial render simply by commenting out the import of the icons and the areas where it is used.
https://github.com/user-attachments/assets/6c38851b-7f63-473e-91b5-ef6d15c7e7f7
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.
@brijeshb42 The config change above doesn't appear to resolve the issue.
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.
@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!
Ok. Feel free to close the issue if it's resolved.
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!
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!
Steps to reproduce
Link to live example: https://github.com/iM-GeeKy/material-ui-pigment-css-vite-ts
Steps:
bun install
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 theApp.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
``` (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 ```npx @mui/envinfo
Search keywords: Icons, Vite, Pigment