less编译后css体积过大主因是未剔除无用样式，--compress仅删空白符无效；真正有效的是--clean-css加--advanced等参数；:extend()需满足目标真实输出、选择器完全匹配、路径一致三前提；嵌套过深和递归mixin会显著增大体积。
Less 编译后 CSS 体积过大，90% 的原因不是没开压缩，而是编译阶段就把不该进生产包的样式全塞进去了——lessc 默认不做任何剔除，只管展开、拼接、输出。
为什么 --compress 基本没用
--compress 只删空格、换行、重复分号，对选择器合并、声明去重、未用规则剔除完全不处理。一个含 200 个 .btn-* 类的文件，压缩前后体积可能只差 3%～5%。
- 它保留所有注释、
@import展开结果、IE hack（如*display: inline） - 不会简化
0px → 0、rgba(0,0,0,1) → #000、也不会合并相同选择器 - 适合本地调试或 CI 快速瘦身，但不是生产环境的体积优化方案
真正起效的是 --clean-css
--clean-css 是外置深度压缩工具，必须单独安装：npm install -g clean-css-cli，且命令中必须带参数才能生效。
- 基础命令必须加
--advanced：否则不合并选择器，体积几乎不降 - 加
--s1保留关键分号，避免 IE8 等老浏览器解析失败 - 加
--compatibility '*'防止rgba()被转成 hex 后丢透明度 - 若有中文注释或
@charset "GBK"，必须加--keep-breaks，否则编码声明可能被误删 - 禁用 sourcemap：
--remove-source-maps --no-rebase，否则它会追加在 CSS 底部，体积暴涨
:extend() 生效的三个硬性前提
:extend() 能减小体积，是因为它不复制样式，只合并选择器；但它不是写了就生效，必须同时满足：
-
.target必须真实输出到最终 CSS 中——不能只靠@import (reference)引入；否则退化为复制整块规则 - 被继承的选择器必须完整匹配，比如
.nav-item:hover不能被.mobile-nav:extend(.nav-item)匹配，得写成.mobile-nav:extend(.nav-item:hover all) - 路径和导入方式必须一致：
./base.less和../shared/base.less在 Less 看来是两个文件，:extend()各自找各自的目标，结果生成两套重复规则 - 加
all才继承伪类、媒体查询等嵌套规则；不加的话，:hover样式不会合并，最后还得单独补，反而更乱
嵌套过深和递归 mixin 是内存与体积双杀
嵌套超 15 层或无终止条件的递归 mixin，不仅导致 JavaScript heap out of memory，还会让 AST 节点爆炸式增长，间接推高 CSS 体积（比如重复生成同一组规则多次）。
- 把
.card { .header { .title { } } }压平为.card-header-title，可减少 AST 节点数 30%～60% - 禁用通配符导入：
@import "components/*.less"在标准 Less 中不支持，Webpack 等工具会静默加载全部文件，彻底废掉按需控制 - 递归 mixin 必须改用尾调用形式：
.gen(@n) { .loop(@i) when (@i > 0) { ... .loop((@i - 1)); } .loop(@n); }，旧式写法在@n > 20时大概率崩溃 - 生成固定范围类（如
.col-1到.col-12），手写展开最安全，零风险
真正棘手的是嵌套 + 递归 + 动态变量混合的场景——此时调大 Node 内存只是延缓崩溃，必须重构结构。最省力的切入点，永远是先砍掉所有未设上限的 when 递归，再压平选择器嵌套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
