材质UI/Webpack/React-生产模式下的className优化/缩小 [英] Material UI / Webpack / React - the className optimization/minification in production mode
本文介绍了材质UI/Webpack/React-生产模式下的className优化/缩小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
webpack - v4+
material ui - v4.9.6
react - v16.12.0
通常,所有类都应作为第一个示例中的最后一个.由于生产模式的某些原因,许多类都不会更改.有什么想法吗?
In a normal way all classes should be as the last one from the first example. In some reason on production mode, many of the classes do not change. Any idea?
示例1:
<div class="MuiDrawer-root MuiDrawer-docked jss408"></div>
示例2:
<div class="MuiPaper-root jss469 MuiPaper-elevation1 MuiPaper-rounded"></div>
推荐答案
样式 className
在生产模式下不是确定性的.
styles className
is not designed as deterministic in prod mode.
但是,生成的 @ material-ui/core
组件的类名的行为不同.满足以下条件时,类名是确定性的:
But the generated class names of the @material-ui/core
components behave differently. When the following conditions are met, the class names are deterministic:
- 仅使用一个主题提供程序(无主题嵌套)
- 样式表的名称以Mui(所有Material-UI组件)开头.
- 类名称生成器的disableGlobal选项为false(默认值).
引用:
- Material-UI的文档 className生成
- 生成器的API creategenerateclassname
这篇关于材质UI/Webpack/React-生产模式下的className优化/缩小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文