从 js 中删除 css 模块对象答案

【问题标题】：Remove css module object from js从 js 中删除 css 模块对象
【发布时间】：2021-04-06 02:15:42
【问题描述】：

我有使用 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"}}

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

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

代替

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

只需从 js 中删除字典对象。它将减少 js 包的大小并提高性能...

是否有任何决定这样做？

【问题讨论】：

【解决方案1】：

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

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

默认情况下，对于生产环境，它将是“哈希”。

【讨论】：