webpack 从js中删除css模块对象

j8ag8udp 于 2023-08-06 发布在 Webpack

关注(0)|答案(2)|浏览(121)

我有webpack（v5）typescript（v4）react（v17）项目，它使用css模块。当我将它与-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中删除dictionary对象。它将减少js包的大小并提高性能。。
有没有这样做的决定？

2条答案

你可以通过在webpack config中做一点修改来将其修改为你的常规类名：

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

字符串
默认情况下，对于生产环境，它将是“hash”。
您可以查看详情https://github.com/webpack-contrib/css-loader#modules

这是不可能的每一个类似的造型解决方案都不关心这一点。还有像https://github.com/vercel/styled-jsx这样的其他库，它们使用一种根本不同的方法。
请记住，没有什么比全局样式更有性能了。
将来，Next.js可能会提供一些东西，用自己的编译器解决所有样式问题。