Path-based imports causing component files to explode in size
Summary
Hi team,
Because MUI recommends avoiding barrel imports (e.g., import { Box, Typography } from '@mui/material') for dev-performance reasons, we’re forced to use path-based imports for every single component:
import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card';
In larger apps, this creates a real DX problem. Simple components end up with 10–15+ import lines, making files balloon in size and reducing readability. It feels unnecessarily repetitive and noisy.
Requested: A supported, optimized way to import multiple components together without triggering the dev-performance issues that currently make barrel imports unusable (especially with Vite + MUI v5.15). Even an official “safe barrel” or generated import map would help tremendously.
This area impacts day-to-day productivity in a big way. Any guidance or plans to address this would be greatly appreciated.
Thanks
Examples
No response
Motivation
No response
Search keywords: imports
Because MUI recommends avoiding barrel imports
To note that this is a vite recommendation. You may find further guidance in the accompanying issue.
Even an official “safe barrel” or generated import map would help tremendously.
Can you clarify further what you envision these solutions to look like exactly, and how they would alleviate the problem?
Someway to be able to import multiple mui components on 1 line
Please respond The problem is specific to Vite dev mode, where importing from @mui/material (the barrel) triggers thousands of module requests. This forces us into path-based imports, which drastically increases import boilerplate in real-world apps.
What I'm asking for: Some MUI-supported mechanism that allows grouped imports (e.g., multiple components on one line) without reverting to the full barrel that causes Vite to load the entire library.
For example, an officially documented pattern, a generated deep-import map, or any “safe barrel” approach that avoids pulling in unused modules during Vite’s dependency graph resolution.
The goal is simply to reduce import noise while staying aligned with Vite’s performance constraints.
For example, an officially documented pattern, a generated deep-import map, or any “safe barrel” approach that avoids pulling in unused modules during Vite’s dependency graph resolution.
Do you have any concrete actionable proposals? I don't know what you mean by a "safe barrel" or how a "generated deep-import map" would solve the problem.
Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.