为什么Material UI构建体积过大？如何优化tree-shake与代码分割

1 修复Tree Shaking失效问题 #

你的导入写法符合MUI官方要求，摇树失效核心是模块格式与打包规则配置问题：

• 确认Babel未将ES模块转换为CommonJS格式，CommonJS不支持静态分析，无法触发Tree Shaking。在项目根目录新增/修改Babel配置文件（.babelrc 或 babel.config.json）：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "modules": false
    }],
    "@babel/preset-react"
  ]
}

• 补充webpack optimization 配置，开启副作用识别，同时确保你使用的是production模式构建，开发模式默认不会执行死代码消除：

// webpack配置optimization节点修改为
optimization: {
  usedExports: true,
  sideEffects: true, // 开启副作用识别，配合package.json的sideEffects字段过滤无副作用代码
}

• 可额外配置babel-plugin-import辅助按需导入，进一步减小冗余体积，Babel配置新增插件：

"plugins": [
  ["import", {
    "libraryName": "@material-ui/core",
    "libraryDirectory": "esm",
    "camel2DashComponentName": false
  }]
]

2 调整代码分割规则避免MUI全量打入主包 #

你当前未配置splitChunks规则，webpack默认会把所有被多chunk引用的node_modules依赖全部打入公共主包，可修改webpack配置自定义拆分逻辑：

optimization: {
  usedExports: true,
  sideEffects: true,
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      // 通用公共依赖：仅被≥3个chunk引用的依赖才打入全局公共包
      commonVendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors-common',
        minChunks: 3,
        priority: -10,
        reuseExistingChunk: true
      },
      // MUI专项拆分：仅被≥2个chunk引用的MUI模块才打入MUI公共包
      muiVendor: {
        test: /[\\/]node_modules[\\/]@material-ui[\\/]/,
        name: 'vendors-mui',
        minChunks: 2,
        priority: 0,
        reuseExistingChunk: true
      }
    }
  }
}

该配置下仅被单个路由引用的MUI组件会直接打入对应路由chunk，不会被抽入公共包，未使用MUI的路由不会加载任何MUI相关代码。

补充优化建议 #

• 在项目package.json中补充sideEffects字段，标记样式文件为有副作用，避免webpack误删样式：

"sideEffects": [
  "*.css",
  "*.scss",
  "*.sass"
]

• 完成配置后重新执行production构建，MUI组件体积可降至几十kb级别，符合预期。

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