Material UI / Webpack / React - 生产模式下的类名优化/缩小

【问题标题】：Material UI / Webpack / React - the className optimization/minification in production modeMaterial UI / Webpack / React - 生产模式下的类名优化/缩小
【发布时间】：2020-07-04 03:08:58
【问题描述】：

webpack - v4+
material ui - v4.9.6
react - v16.12.0

在正常情况下，所有类都应该是第一个示例中的最后一个。出于某种生产模式的原因，许多类没有改变。有什么想法吗？

示例 1：

<div class="MuiDrawer-root MuiDrawer-docked jss408"></div>

示例 2：

<div class="MuiPaper-root jss469 MuiPaper-elevation1 MuiPaper-rounded"></div>

【问题讨论】：

标签： javascript reactjs webpack material-ui production

【解决方案1】：

styles className 在 prod 模式下没有被设计为确定性的。

但是@material-ui/core 组件的生成类名表现不同。当满足以下条件时，类名是确定的：

仅使用一个主题提供程序（无主题嵌套）
样式表的名称以 Mui 开头（所有 Material-UI 组件）。
类名生成器的 disableGlobal 选项为 false（默认值）。

参考：

Material-UI 文档className generation
生成器的APIcreategenerateclassname

【讨论】：

谢谢。这解决了问题： const generateClassName = createGenerateClassName({ disableGlobal: true }) 和 ....