从 js 中删除 css 模块对象

我有使用 css 模块的 webpack (v5) typescript(v4) react(v17) 项目。当我将它与 -production 标志捆绑在一起时，我的输出为：

23254:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>i});const i={backOrdersCaution:"b_F-d b_G-d",cartForm:"b_H-d"}}

我看到这是 javascript 的字典，用于将项目类名转换为 css 模块类名。但是为什么不直接编译成 className jsx 属性呢？类似的东西：

<Component className="b_F-d b_G-d"/>

代替

<Component className="modules[23254].backOrdersCaution/>

然后从 js 中删除字典对象。它会减少 js 包的大小并提高性能...

是否有任何决定这样做？

您可以通过在 webpack 配置中稍作更改将其修改为您的常规类名：

modules: {
    localIdentName: '[local]'
},

默认情况下，对于生产环境，它将是 'hash'。