Material UI不同导入规范导致打包体积差异问题咨询

最近在维护一个基于material-ui@next（具体版本是v1.0.0-beta.38）的项目时，发现团队里同事用了两种不同的Material UI组件导入写法，索性做了个webpack生产打包后的体积对比，给大家参考下：

两种导入方式的体积差异 #

• 方式一：根路径直接导入

  import Button from "material-ui/Button";
  

  打包后该组件相关体积：121.8K（gzipped: 33.9K）

• 方式二：es子路径导入

  import Button from "material-ui/es/Button";
  

  打包后该组件相关体积：101.8K（gzipped: 29.4K）

统一导入规范后的测试结果 #

之后我把项目里所有导入代码都改成了仅保留方式一的写法，重新打包后发现：

项目整体的Material-UI相关打包体积和单个组件的测试趋势一致，统一使用根路径导入时，整体包体积比混合使用或单独用es子路径的情况更大。

总结建议 #

因此，我们可以得出结论：在Material-UI v1.0.0-beta.38这个版本中，使用material-ui/es/[Component]的导入方式能获得更优的打包体积，减少不必要的冗余代码引入。如果项目对前端包体积有严格要求，建议团队统一采用这种es子路径的导入规范，能有效降低gzip后的包大小，进而提升页面的加载性能。

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