Material UI / Webpack / React - 生产模式下的类名 optimization/minification
Material UI / Webpack / React - the className optimization/minification in production mode
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>
样式 className
在产品模式下未设计为确定性的。
但是 @material-ui/core
组件的生成的 class 名称表现不同。当满足以下条件时,class 名称是确定性的:
- 只使用一个主题提供者(无主题嵌套)
- 样式 sheet 的名称以 Mui 开头(所有 Material-UI 组件)。
- class 名称生成器的 disableGlobal 选项为 false(默认值)。
参考:
- Material-UIclassName generation
的文档
- API 生成器 creategenerateclassname
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>
样式 className
在产品模式下未设计为确定性的。
但是 @material-ui/core
组件的生成的 class 名称表现不同。当满足以下条件时,class 名称是确定性的:
- 只使用一个主题提供者(无主题嵌套)
- 样式 sheet 的名称以 Mui 开头(所有 Material-UI 组件)。
- class 名称生成器的 disableGlobal 选项为 false(默认值)。
参考:
- Material-UIclassName generation 的文档
- API 生成器 creategenerateclassname