less-loader 必须启用 cache 和 thread：cache 复用 ast 和 css 输出，thread 启用 worker_threads 加速 mixin 解析；sourcemap 应关闭，禁用动态 @import 和 ../ 路径，变量与 mixin 收口至 _common.less，单文件≤500 行、嵌套≤4 层，拆分模块并用 lessc --lint 检查。
less-loader 必须开 cache 和 thread
Webpack 5 里 less-loader 默认不启用缓存和多线程，每次改一行变量，整个 @import 树都得重解析 AST，根本不是 Less 慢，是 loader 没配对。不开 cache: true，node_modules/.cache/less-loader 目录压根不会生成；不开 thread: true，mixins 多的文件就卡在单核上。
-
cache: true复用上一轮的 AST 和 CSS 输出，二次构建跳过 tokenize + parse -
thread: true启用worker_threads，尤其对含.btn-base()这类高频 mixin 的文件提速明显 -
sourceMap: false开发阶段非调试时必须关掉，否则每个.less都额外生成 map 文件
禁止 @import glob 和动态路径
@import "mixins/**/*.less" 或 @import "@{base}/theme.less" 这类写法会让缓存失效——路径无法静态推断，loader 不知道哪个文件实际被引用，只要 mixins/ 下任一文件 mtime 变，整个依赖树就作废。
- 所有公共
@variable和.mixin()必须收口到单一_common.less - 每个业务文件顶部第一行只能是
@import "_common.less"，前面不能有其他@import - 禁用
../跳转、**匹配、变量拼接路径
单文件别超 500 行，嵌套别超 4 层
Webpack 的 less-loader 对每个 .less 文件单独缓存和依赖追踪。一个 2000 行的 theme.less 修改后，哪怕只动了一行 @primary-color，整个文件都要重编译；嵌套超过 4 层，&:hover 和 &.is-active 的拼接开销会指数级放大。
- 按功能拆：把
variables.less、mixins.less、components/button.less分开 - 用
lessc --lint扫描嵌套超 5 层的文件，优先改成扁平 class（如.card-title替代.card .header .title） - 避免在
@media块内再嵌套多层，@media本身已触发一次重计算
命令行编译要关 source-map、开 cache、限 include-path
lessc 默认开启 --source-map、严格语法检查、全量 @import 解析，watch 模式还会递归监听 node_modules 里的无关文件，导致卡住。
- 非调试阶段加
--no-source-map，上线前加--clean-css="--s1 --advanced"压缩 - watch 时显式限定范围：
lessc --watch --include-path=./src/less ./src/less/main.less - 加
--disable-dotfiles防止监听.gitignore同级的备份.less文件
@import 路径是否收敛、变量是否被静态引用、缓存是否命中——这些点漏掉任何一个，优化就白做。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
