Material UI两种TableRow导入方式对比：哪种更优？是否存在性能差异？

先明确两种导入代码：

方式一：深度导入 #

import TableRow from "@mui/material/TableRow";

方式二：根包导入 #

import { TableRow } from "@mui/material";

性能差异 #

• 方式一是直接定位到TableRow的具体文件导入，打包工具只会引入该组件及它的直接依赖，不会牵连@mui/material包内的其他组件代码。
• 方式二从根包导入，虽然现代打包工具（Webpack、Vite等）的tree-shaking功能能剔除未使用的代码，但@mui/material的根入口文件本身会加载不少内部导出和公共依赖，tree-shaking的清理效率不如深度导入。在项目规模大、打包配置不够精细的场景下，可能会让最终打包体积略大。

不过要明确：如果你的打包工具配置到位，tree-shaking完全生效，二者的性能差异几乎可以忽略不计。

哪种更优？ #

要根据场景选择：

• 若你对打包体积敏感，优先选方式一（深度导入），能最大程度减少冗余代码。
• 若追求代码简洁性和可维护性，方式二更合适——当你需要导入多个Material UI组件时，可以合并成一行代码，比如：

  import { Table, TableRow, TableCell } from "@mui/material";
  

  这样代码更整洁，后续增减组件也更方便。
• 另外，Material UI官方更推荐方式二，因为官方会确保根入口的tree-shaking兼容性，而且就算后续组件内部文件路径调整，根导入的代码也不需要修改，避免了路径变更导致的报错问题。

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