Less编译生成的CSS文件体积过大，这是许多前端开发者常遇到的困扰。但90%的情况下，问题根源并非压缩配置不到位，而是编译阶段就已经将本不该进入生产环境的样式全部打包进去了。lessc 的默认行为是保留所有内容，它只负责展开、拼接和输出，最终一股脑儿地将所有样式塞进一个.css文件里。这才是CSS文件体积膨胀的根源所在。
为什么 --compress 参数效果有限
--compress 这个参数，很多新手会误以为它是一键压缩CSS的利器。实际上，它只做了一件事：删除空格、换行以及重复的分号。它不会合并选择器、不会处理声明去重，更不会剔除未使用的样式规则。如果一个文件里包含了200个 .btn-* 类，使用 --compress 之后，体积可能仅减少3%到5%，效果几乎可以忽略不计。
真正能起到显著压缩效果的，是 --clean-css 参数。但这需要额外安装插件：npm install -g less-plugin-clean-css。安装完成后也不能直接使用，需要带上参数：lessc app.less --clean-css="--s1 --advanced --compatibility '*'"。这里有一个容易踩坑的地方：如果不加 --advanced，就不会合并选择器，压缩效果会大打折扣。另外，--s1 是为了保留关键分号，避免IE8等老版本浏览器解析失败；--compatibility '*' 则是为了兼容所有CSS版本，防止 rgba() 被转换成 hex 后丢失透明度信息。如果项目中使用了 @charset "GBK" 或者包含中文注释，还需要加上 --keep-breaks，否则 --clean-css 可能会误删编码声明。
@import (once) 和 (reference) 必须配对使用
CSS体积膨胀的另一个常见原因，是同一份 .icon 被5个文件分别 @import，又各自 :extend(.icon)，结果编译出5套完全相同的样式规则。这完全是在浪费带宽资源。
解决方法是配对使用 @import (once) 和 @import (reference)：
@import (once) "base/_extends.less"：确保像.sr-only、.clearfix这类公共基础类只被引入一次。注意路径必须完全一致，./_extends不等于../base/_extends，路径不匹配就会导致重复引入。@import (reference) "mixins/_utils.less"：只提供.center()这类 mixin 的定义，不输出任何CSS。但需要注意的是，只要某处调用了.center()，它展开的声明就一定会进入最终CSS。所以，reference 只能帮你不引入没用的CSS，无法帮你省去被调用的样式。- 禁用
@import "components/*.less"：通配符导入在标准Less中并不被支持，Webpack等构建工具会静默加载全部文件，彻底破坏按需控制的能力。这种写法就是CSS体积膨胀的温床。 - 检查编译后的CSS：如果看到
.icon, .btn-icon, .menu-icon { }这种逗号合并块，说明extend成功了；如果只有孤立的.btn-icon { }，那就是继承目标没有输出，或者路径又出现了错位。
嵌套超过15层或递归mixin必须重构
嵌套每加深一层，AST节点数会呈非线性增长，编译性能也会直线下降。递归mixin如果没有终止条件，在Less 3.9到3.10.x版本中会无限展开，最终直接触发 Ja vaScript heap out of memory，导致编译崩溃。
解决办法有三条：
- 把
.card { .header { .title { } } }压平为.card-header-title。BEM命名方式比深层嵌套更轻量，也更容易维护。 - 递归写法必须使用尾调用形式：
.gen(@n) { .loop(@i) when (@i > 0) { ... .loop((@i - 1)); } .loop(@n); }。旧式写法.gen(@n) when (@n > 0) { .gen((@n - 1)); }在@n > 20时大概率会崩溃，尽量避免使用。 - 生成固定范围类（比如
.col-1到.col-12），手写展开最稳妥，零风险。不要用递归mixin去生成这种固定列表。 - 升级
less到^4.2.0或^3.13.1，新版本修复了变量循环检测和最大调用栈限制，能有效避免很多坑。
最容易被忽略的一点是：Less本身没有AST分析能力，@import 和 .mixin() 是否被JS实际使用，它完全不会去管。所谓“摇树优化”，其实是构建工具决定哪些 .less 文件该参与编译。路径收口、入口收敛、动态import，这三者缺一不可。这才是减少CSS体积的真正关键所在。
