less编译css体积大主因是未剔除冗余样式，而非压缩不足；--compress仅删空格换行，无效；真正有效的是--clean-css（需安装插件并配--advanced等参数），配合@import(once)/(reference)、扁平化嵌套及构建工具tree shaking。
Less编译出的CSS体积大，90%不是压缩没开好，而是编译阶段就把不该进生产包的样式全塞进去了——lessc 默认不删任何东西，只管展开、拼接、输出。
为什么 --compress 基本没用
--compress 只删空格换行和重复分号，对选择器合并、声明去重、未用规则剔除完全不处理。一个含 200 个 .btn-* 类的文件，压缩前后体积可能只差 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) 必须配对用
体积膨胀主因是同一份 .icon 被 5 个文件各自 @import，又各自 :extend(.icon)，结果编译出 5 套相同规则。
-
@import (once) "base/_extends.less"：确保公共基础类（如.sr-only、.clearfix）只被引入一次，路径必须完全一致（./_extends≠../base/_extends） -
@import (reference) "mixins/_utils.less"：只提供.center()这类 mixin 定义，不输出任何 CSS；但只要某处调用了.center()，它展开的声明就一定会进最终 CSS - 禁用
@import "components/*.less"：通配符导入在标准 Less 中不被支持，Webpack 等工具会静默加载全部文件，彻底废掉按需控制 - 检查编译后 CSS：如果看到
.icon, .btn-icon, .menu-icon { }这种逗号合并块，说明extend成功；如果只有孤立的.btn-icon { }，就是继承目标没输出或路径错位
嵌套超 15 层或递归 mixin 必须重构
嵌套每深一层，AST 节点数非线性增长；递归 mixin 若无终止条件，Less 3.9–3.10.x 会无限展开，直接触发 JavaScript 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），手写展开最稳，零风险 - 升级
less到^4.2.0或^3.13.1，新版修复了变量循环检测和最大调用栈限制
最容易被忽略的点：Less 本身没有 AST 分析能力，@import 和 .mixin() 是否被 JS 实际使用，它完全不管。所谓“摇树”，其实是构建工具决定哪些 .less 文件该参与编译——路径收口、入口收敛、动态 import，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
