Less编译前应删掉未用组件导入、全局冗余样式、带DISABLED注释的规则及无守卫的重复mixin调用；启用--strict-math=on和--js，禁用source-map，避免autoprefixer冗余前缀。
Less编译前就该删掉哪些东西
Less本身不压缩CSS，体积减少30%的关键在于编译前主动剔除冗余。很多项目把所有变量、混合（.mixin）、样式片段全塞进入口文件，最后生成大量未使用的CSS规则。
常见错误现象：npm run build后发现 main.css 里有几十个带 .btn--ghost、.card--outline 的类，但页面根本没用到——这些全来自未按需引入的 components.less。
- 只在真正用到组件的页面中
@import对应的Less文件，别在全局index.less里一股脑导入全部 - 把通用工具类（如
.u-text-center）单独拆成utilities.less，按需引入，而不是默认加载 - 删除所有带
// TODO、/* DISABLED */注释但实际未移除的规则，Less不会自动跳过它们
怎么让.mixin不生成重复CSS
Less的混合（.mixin）在每次调用时都会原样展开，如果10个组件都调用 .flex-center()，就会生成10份相同的 display: flex; justify-content: center; align-items: center; ——这是体积膨胀的主因之一。
使用场景：布局类、重置类、主题色类等高频复用的混合最危险。
- 对纯声明型混合（无参数、无条件逻辑），改用CSS自定义属性替代，例如用
--text-primary: #333;+color: var(--text-primary); - 必须用混合时，加守卫（
when）限制输出，比如.border(@w: 1px) when (@w > 0) { border: @w solid #ccc; }，避免.border(0)仍输出空边框 - 禁用
inline混合（即不带括号的.clearfix），这类会强制展开，无法被压缩工具识别为可合并项
编译时必须开的两个开关
Less CLI 和 webpack-less-loader 默认关闭关键优化，不手动打开就等于放弃压缩主动权。
参数差异：clean-css 是后处理压缩，而 less --strict-math=on --js 这类是编译期精简——后者能直接砍掉计算冗余和语法糖膨胀。
- 启用
--strict-math=on：避免2px + 4px被保留为字符串，强制运算成6px，减少字符数 - 启用
--js（或 webpack 中设javascriptEnabled: true）：允许在变量计算中用 JS 表达式，比如动态生成断点列表，避免手写20行重复@media - 禁用
--source-map上线构建：source map 文件虽不进CSS正文，但会拖慢构建且常被误打包进生产产物
为什么autoprefixer不能帮你减体积
很多人以为加了 autoprefixer 就算优化了，其实它只增不减：给 display: flex 加上 -webkit-box、-ms-flexbox 等前缀，反而让体积变大。
性能影响：旧版浏览器兼容要求越高，插入的冗余前缀越多；现代项目若已放弃 IE11，这些全是白加的字节。
- 检查
browserslist配置，删掉IE 11、Android 这类已无真实用户的条目 - Less里别写
-webkit-transition手动前缀，交给autoprefixer统一处理，否则它会在已有前缀基础上再叠一层 - 用
postcss-discard-comments配合postcss流程，在Less编译后立刻删注释——Less自己的//注释会进入CSS，/* */则不会
真正能压到30%的，从来不是某个神奇语法，而是持续清理未用代码、关掉默认浮肿选项、以及清楚知道每一行CSS到底为什么存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
