The React web application’s first page can load very slowly in development mode when SSR (Server Side Rendering) is enabled. There can be many causes, but there is one that can be eliminated easily. If the application uses Google’s Material UI library the loading of the more than 9000 icons can take a long time.
The main issue
The main issue was @mui/icons-material being imported in the NavigationMenu.tsx and Drawer.tsx components. This package contains thousands of icons (~9000 modules) and loads synchronously, causing Vite to do expensive on-demand optimization on first page load.
Changes Made
- NavigationMenu.tsx – Replaced @mui/icons-material imports with
lucide-react:- ChevronRight → ChevronRight from lucide-react
ExpandMore→ ChevronDown from lucide-react- Menu → Menu from lucide-react
- Drawer.tsx – Replaced Close icon from @mui/icons-material with X (aliased as Close) from
lucide-react - vite.config.ts – Optimized the configuration:
- Removed workspace packages from optimizeDeps.include (they link directly to source)
- Added more MUI submodules to pre-bundling (Collapse, Divider, Fade, Grow, List components, etc.)
- Removed @mui/icons-material from SSR noExternal since it’s no longer used
Performance Impact
- Before: Loading @mui/icons-material would trigger parsing/transforming thousands of modules
- After:
lucide-reactis much smaller (~400 icons, tree-shakeable) and already pre-bundled
The first page load in dev mode should now be significantly faster.
