Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs][material-ui] Improve minimizing bundle docs #43781

Original file line number Diff line number Diff line change
Expand Up @@ -214,47 +214,7 @@ It will perform the following diffs:

The packages published on npm are **transpiled** with [Babel](https://github.com/babel/babel), optimized for performance with the [supported platforms](/material-ui/getting-started/supported-platforms/).

A [modern bundle](#modern-bundle) is also available.

### How to use custom bundles?

:::error
You are strongly discouraged to:

- Import from any of the custom bundles directly. Do not do this:

```js
import { Button } from '@mui/material/legacy';
ZeeshanTamboli marked this conversation as resolved.
Show resolved Hide resolved
```

You have no guarantee that the dependencies also use legacy or modern bundles, leading to module duplication in your JavaScript files.

- Import from any of the undocumented files or folders. Do not do this:

```js
import { Button } from '@mui/material/esm';
```

You have no guarantee that these imports will continue to work from one version to the next.

:::

A great way to use these bundles is to configure bundler aliases, for example with [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):

```js
{
resolve: {
alias: {
'@mui/material': '@mui/material/legacy',
'@mui/styled-engine': '@mui/styled-engine/legacy',
'@mui/system': '@mui/system/legacy',
'@mui/base': '@mui/base/legacy',
'@mui/utils': '@mui/utils/legacy',
'@mui/lab': '@mui/lab/legacy',
}
}
}
```
A `modern` bundle is also available.

### Modern bundle

Expand Down