[Feature] Support optimizePackageImports like NextJS

[vimutti77]

Problem

Some packages are export hundreds or thousands of modules (e.g., @mui/material, @mui/icons-material), which can cause performance issues in development and production.

This is the build time before I import from @mui/icons-material

This is the build time after I add import { Delete } from "@mui/icons-material". It has increased about 20X.

This problem can be solved by changing the import from top-level import.

import { Delete } from '@mui/icons-material';

To direct import.

import Delete from '@mui/icons-material/Abc';

But this will have a huge impact on DX, as VSCode will always auto-suggest the top-level import. So, I have to edit the import path every time after I use the suggestion.

Solution A

Automatically optimizes package imports similar to NextJS
https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports

Solution B

Allow us to add the plugin to transform the code before the compilation. So, we can create and use some plugin like https://github.com/avocadowastaken/babel-plugin-direct-import

[jansedlon]

This might help? vite-plugin-barrel