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 '*'防止rgba()被转成hex后丢透明度 - 如果Less文件里有大量
//行注释，clean-css会原样保留（它只删/* */），导致体积虚高
为什么@import反复引入会让体积翻倍
Less不会自动去重——@import "variables.less"在3个文件里各出现一次，就输出3份变量生成的CSS（哪怕实际没用到任何变量）。
- 所有公共文件（如
variables.less、mixins.less）必须显式加@import (once)，不能省略括号 -
(once)只对**完全相同路径**生效：@import (once) "./mixins"和@import (once) "../shared/mixins"仍被视为两个文件 - 禁用通配符导入：
@import "components/*.less"在标准Less中不被支持，Webpack等工具会静默加载全部文件，彻底废掉按需控制 - 构建时开启
strictImports: true（less-loader或命令行），让缺失文件立刻报错，而不是静默跳过
为什么:extend()没减少体积反而更大
:extend()失效的根本原因是被继承的选择器根本没输出——比如它来自@import (reference)文件，那:extend()就退化成复制整套声明。
- 检查编译后CSS：搜
.icon, .btn-icon, .menu-icon这种逗号合并块，才是:extend()成功标志；如果只有孤立的.btn-icon { }，说明继承链断了 -
:extend()必须搭配@import (once)才可控——否则多个文件各自@import "base.less"，生成多份.btn规则，:extend()在不同文件里分别继承不同副本 - 必须显式写
all：.btn-primary:extend(.btn all)；不加all，只继承.btn直接声明的样式，&:hover、&.is-active全被忽略 - 别在
@import (reference)文件里混写副作用规则（如@font-face、@keyframes），它们会被每个引用该文件的入口重复输出
嵌套过深和递归mixin是内存与体积双杀
嵌套每深一层，AST节点数非线性增长；递归mixin若无终止条件，Less 3.9–3.10.x会无限展开，直接触发JavaScript heap out of memory。
- 三层嵌套如
.card { .header { h1 { color: red; } } }应压平为.card-header-h1，输出更扁平、gzip率更高 - 递归mixin必须用尾调用形式：
.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），手写比循环更安全；动态需求改用PostCSS插件处理
最常被忽略的一点：真正难处理的不是“怎么压缩”，而是“哪些样式本就不该出现在这个请求里”。lessc编译不出错，不代表产出合理；体积没报错，不等于没拖慢用户。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
