我之前在使用Clarity UI的深色主题时也碰到过一模一样的困扰，所以特别能理解你的感受！

先给你吃个定心丸：这确实是不少开发者都会遇到的情况 #

Clarity UI的深色主题样式文件本身就不算小巧——它需要覆盖整套组件的所有状态（比如hover、active、disabled等），相当于在浅色主题的基础上做了一层全量的样式重写。尤其是在小型应用里，它占总包体积1/3的比例其实挺常见的，所以不一定是你的操作出了问题。

但也可以从这些方向优化，看看能不能缩小体积 #

• 按需引入，别全量加载：如果你只是用到了Clarity的部分组件，完全没必要引入整个clr-ui-dark.min.css。可以去查Clarity的官方文档，找到对应组件的单独深色样式文件，只加载你需要的那部分。
• 开启CSS Tree Shaking：检查下你的webpack配置，有没有配置purgecss-webpack-plugin这类工具？它可以扫描你的模板和JS文件，自动剔除那些没有被实际使用的CSS规则，能砍掉不少冗余代码。
• 排查重复引入问题：有没有不小心同时打包了浅色和深色主题的完整样式？如果是做主题切换的场景，建议用动态加载的方式——比如用户切换到深色模式时再加载深色样式文件，而不是一开始就把两个主题都塞进包里。
• 对比基础样式体积：你可以看看clr-ui.min.css（浅色主题）的大小，深色主题理论上应该比它小一点（因为是覆盖式的）。如果你的深色样式反而更大，大概率是打包时重复引入了某些代码块，得检查下webpack的chunk拆分规则。

希望这些建议能帮到你！

内容的提问来源于stack exchange，提问作者blomster