Gatsby项目升级MUI至v5后包体积增10KB，是否正常及如何优化

体积增长合理性说明 #

MUI v5版本对整体架构做了较大重构：替换了原有的JSS样式方案，默认内置emotion样式runtime，同时新增了大量组件级无障碍逻辑、跨浏览器样式兼容、默认主题预置规则。在已经确认tree-shaking生效的前提下，10KB的产物增量属于正常的版本迭代范围，不会对线上加载性能产生明显影响。

可行的体积优化方案 #

• 调整组件导入方式
  所有MUI组件优先使用路径导入语法，避免从顶层包批量导入，减少打包工具引入冗余模块：

// 推荐写法
import Button from '@mui/material/Button'
// 不推荐写法
import { Button } from '@mui/material'

也可以配置babel-plugin-import插件自动完成导入路径转换，配置参考：

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

• 按需引入图标资源
  如果项目使用@mui/icons-material包，同样采用单路径导入方式，不要从顶层批量导入所有图标，避免全量图标包被打入产物。
• 精简自定义主题
  如果项目没有用到MUI默认主题内置的多余配色、过渡动画、响应式断点规则，可以在自定义theme中覆盖对应配置，删除不需要的默认规则，减少主题相关的冗余代码。
• 优化样式运行时配置
  项目中已使用tss-react的情况下，确认不要同时引入emotion、styled-components等多余样式运行时依赖，同时开启tss-react的缓存配置，避免重复生成样式代码。
• 开启Gatsby构建优化
  在gatsby-config.js中开启默认的JS压缩、产物gzip/brotli压缩配置，线上部署时同步开启CDN的静态资源压缩策略，最终用户侧实际加载的体积会远小于本地构建的未压缩产物体积。

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