ReactJS打包仅保留用到的依赖：Material UI单组件引入与Webpack摇树疑问

好问题！这其实是很多使用UI库的开发者都会关心的点，我来给你详细说清楚：

首先，Material UI从v4开始就完全支持ES模块格式的导出，这意味着如果你用ES6的import语法单独引入某个组件（比如import Button from '@mui/material/Button';），Webpack在生产环境下是可以顺利进行摇树优化（tree-shaking）的，只会把你用到的组件代码打包进去，其他未使用的组件会被剔除。

不过要确保满足几个前提条件，才能让摇树优化生效：

• 你的Webpack配置必须将mode设置为production：开发模式下Webpack默认不会开启摇树优化，只有生产模式才会自动启用这个功能。
• 不要让Babel把ES模块转成CommonJS格式：如果你的Babel配置里用了@babel/preset-env，要确保没有开启modules: "commonjs"（默认是auto，在Webpack环境下会保持ES模块格式，所以一般不用额外修改），因为CommonJS的require语法不支持摇树优化。

举个正确的导入示例：

// 正确：只导入Button组件
import Button from '@mui/material/Button';

而下面这种写法就会导致整个Material UI库被打包，无法摇树：

// 错误：导入整个库的所有导出
import * as Mui from '@mui/material';
const Button = Mui.Button;

另外补充一点：有些Material UI组件内部会依赖其他的基础组件（比如Button可能用到Typography的部分样式），但Webpack只会打包这些组件实际用到的依赖代码，不会把整个依赖组件都打包进来，这点可以放心。

总结一下：只要你用ES6的单独导入语法，并且Webpack处于生产模式，摇树优化就会正常工作，不会把未使用的Material UI组件打包进你的生产包。

内容的提问来源于stack exchange，提问作者Ruhul Amin