diff --git a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md index 52dd6a3d86b811..1b2eb7230c2b54 100644 --- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md +++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md @@ -207,6 +207,57 @@ It will perform the following diffs: +import { Button, TextField } from '@mui/material'; ``` +### Option three: use a SWC plugin + +This option pretty much similar to the option two, except for the developer who is using [SWC Compiler](https://swc.rs/). Use this [plugin](https://github.com/swc-project/plugins/blob/main/packages/transform-imports/README.md): + +`yarn add -D @swc/plugin-transform-imports` + +Modify your .swcrc or Webpack configuration: + +```js +/* webpack.config.js */ +const webpackConfig = { + // ... + module: { + rules: [ + ...{ + test: /\.tsx?$/, + use: [ + { + loader: 'swc-loader', + options: { + jsc: { + experimental: { + plugins: [ + [ + require.resolve('@swc/plugin-transform-imports'), + { + '@mui/material': { + transform: '@mui/material/{{member}}', + }, + '@mui/icons-material': { + transform: '@mui/icons-material/{{member}}', + }, + // For styled, useTheme etc + '@mui/system': { + transform: '@mui/system/{{member}}', + }, + }, + ], + ], + }, + }, + }, + }, + ], + }, + ], + }, +}; +module.exports = webpackConfig; +``` + ## Available bundles The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/material-ui/getting-started/supported-platforms/).