Less不支持Tree Shaking，根本原因是其纯文本预处理特性无AST分析能力，@import和mixin调用不追踪实际使用，导致未用样式仍被编译输出；体积优化关键在收敛导入策略、扁平化嵌套，而非依赖Gzip压缩。
Less 本身不支持 Tree Shaking，生成的 CSS 体积大，根本原因不是“压缩没开好”，而是“不该编译的样式被编译进去了”。Gzip 只是传输层补救，不能解决冗余样式输出问题。
Less 编译阶段无法自动删掉未使用的样式
Less 是纯文本预处理，没有 AST 分析能力，@import 或 .mixin 被调用与否，它只看语法是否合法，不追踪 JS 中是否实际引用了对应类名。所以：
- 你在
button.less里写了.btn-primary { ... }，哪怕 JS 里一个btn-primary没用过，它也会照常输出 -
@import (reference)确实能阻止变量/mixin 输出 CSS，但只要某处调用了该 mixin，所有展开的声明就全进最终 CSS - Webpack 的
css-loader配置exportOnlyLocals: true对 Less 源文件无效——它只影响 CSS Modules 的 JS 导出，不干预 Less 编译流程
真正有效的“摇树”得靠构建工具链配合模块化拆分
所谓“Less 的 Tree Shaking”，其实是让构建工具决定哪些 .less 文件该参与编译。关键不在 Less 本身，而在 import 路径和打包入口：
- 把每个组件样式拆成独立文件（如
Dialog.less、Input.less），不塞进全局index.less - 在 JS 中按需
import('./Dialog.less')，配合 Webpack 的MiniCssExtractPlugin+css-loader的modules: false模式 - 禁用通配导入：
@import "components/*.less"会让所有文件无条件参与编译，彻底废掉摇树可能性 - 检查最终 CSS 是否含大量未使用类（比如
.sr-only出现在生产包里但页面从没渲染辅助元素），说明模块隔离失败
Gzip 不是体积优化的起点，而是最后一道防线
很多人一发现 CSS 大就急着配 Nginx 的 gzip on，但若原始 CSS 已含 300KB 冗余规则，Gzip 压到 80KB 仍比本该只有 40KB 的干净 CSS 多传 40KB。更关键的是：
立即学习“前端免费学习笔记（深入）”；
- Nginx 的
gzip_types必须显式包含text/css，否则默认只压 HTML - Webpack 构建时预生成
.gz文件（用compression-webpack-plugin）比 Nginx 实时压缩更稳——避免因请求头缺失Accept-Encoding: gzip导致回退到原文件 -
compression-webpack-plugin的threshold: 10240和minRatio: 0.8必须设，否则小文件压缩后反而更大（比如 2KB CSS 压完变 2.3KB）
最易被忽略的一点：Less 编译输出体积，90% 由 @import 策略和嵌套深度决定，跟 Gzip 设置无关。先砍掉重复 @import 和扁平化 &-modifier，再谈压缩。否则就是一边开水龙头，一边拿盆接水。
