--compress不能真正解决冗余，因为它只删除空格、换行和注释，不合并重复选择器、不去重声明块，也无法识别未加括号的mixin（如.clearfix）导致的空规则，仅将冗余内容压成一行，体积降幅有限且掩盖根源问题。
为什么 --compress 不能真正解决冗余
加 --compress 只删空格换行和注释，不合并重复选择器、不去重声明块，更不会识别未调用的 .clearfix 这类无括号 mixin 导致的空规则。它只是把一堆冗余内容压成一行，体积降得有限，还掩盖了真实问题。
常见现象：编译后 CSS 里反复出现 .btn { }、.icon { } 这种空块，或同一套声明在多个地方重复输出——--compress 对它们完全无效。
- 检查输出里是否有未加括号的类名（如
.sr-only），它们不是选择器，是被误解析的 mixin 声明 -
@import (reference)文件里若混有顶层.foo { }，会被跳过，但漏写的无括号声明仍会输出 - 多个文件都
@import "mixins.less"（没加(once)），会导致 mixin 展开逻辑重复执行多次
如何定位并修复“空类”式冗余
真正让 CSS 膨胀的，不是空行，而是源码里那些本该是 mixin 却没写括号的声明。它们被 lessc 当作普通类选择器处理，生成空规则 + 换行，压缩工具根本无法识别。
用正则全局搜索：\.([a-zA-Z0-9\-]+)\s*\{，重点检查匹配结果中是否含 .clearfix、.sr-only、.visually-hidden 等常见基础类——只要没括号，就是隐患。
- 把
.clearfix改成.clearfix()，.sr-only改成.sr-only() - 确认所有
@import (reference)文件里没有顶层.xxx { }规则（它们应只含@mixin、@function、@variable） - 运行
lessc --lint扫描语法风险，它会提示 “mixin not called” 类警告
@import (once) 和 @import (reference) 必须配合使用
单独用 @import (reference) 不等于去重；单独用 @import (once) 也不防重复展开。二者要一起用，才能切断冗余链路。
典型错误：在 main.less 里写 @import (reference) "_mixins.less"，但 _mixins.less 内部又写了 @import "base.css"（没加 (reference)），结果 base.css 样式照常输出，而 .btn 因 reference 被跳过，导致 .btn-primary:extend(.btn all) 直接退化为复制声明。
- 所有公共定义文件（变量、mixin、extend 目标）统一收口到单个
_defines.less，且只用@import (once) "_defines.less" - 禁用
@import "components/*.less"这类通配导入——路径不可控，(once)失效 - 检查编译后 CSS 是否出现
.icon, .btn-icon, .menu-icon这种逗号分隔的合并选择器，这是 extend 成功的标志；如果只有孤立的.btn-icon { }，说明继承链断了
压缩该交给 PostCSS，而不是依赖 lessc
--clean-css 是 lessc 的外壳调用，参数传递易出错，且默认保留 sourcemap 和部分注释，反而可能让体积变大。生产环境应把压缩逻辑移出 Less 编译阶段，交由 PostCSS 生态统一处理。
Webpack 中推荐链路：less-loader → css-loader → postcss-loader（含 cssnano）。这样能安全启用 discardComments: { removeAll: true }、mergeLonghand: true 等深度优化，且不破坏层叠顺序。
- 关闭
lessc的--source-map，生产环境不需要映射文件 - 禁用
math: always，改用math: strict，避免calc(100% - 20px)被提前计算成无效值 - 若必须用命令行，优先选
--no-source-map --clean-css="--s1 --compatibility='*'"，而非裸跑--compress
真正的冗余从来不在空行里，而在 import 路径是否收敛、mixin 是否被正确调用、extend 是否有真实目标。压缩只是最后一道过滤网，不是手术刀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
