Less编译输出的CSS文件太大怎么处理？

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，缺一不可。