less编译慢的根源在于构建工具配置不当：必须启用less-loader的cache和thread选项，禁用sourcemap（ci环境），收口所有@import路径，限定处理范围，并确保缓存目录持久化及modifyvars静态化。
Less编译慢不是Less本身的问题，而是构建工具没关缓存、没限范围、没切线程——尤其在大型项目里，每次改一个变量，整个@import树都重跑。
less-loader 必须开 cache 和 thread
默认的 less-loader 是单线程、无磁盘缓存的，哪怕只改一行 @primary-color，也会重新解析 AST、重走全部 @import 链。不配这两项，提速无从谈起。
-
cache: true：让结果存到node_modules/.cache/less-loader，二次构建直接复用 AST 和 CSS 输出 -
thread: true：启用 Node.js 的worker_threads，对含大量.mixin()的文件提速明显 - 别漏掉
sourceMap: false（开发阶段除外），否则每个.less都额外生成 map 文件，拖慢解析
收口所有 @import，禁用 glob 和动态路径
像 @import "mixins/**/*.less" 或 @import "@{base}/theme.less" 这类写法，会让 less-loader 完全无法做增量判断——它不知道哪些文件实际被引用，只要任一文件变更，整棵树就失效。
- 所有公共变量、函数、mixin 必须统一收口到一个文件，比如
_common.less - 每个业务
.less文件顶部第一行只能是@import "_common.less";，且不能有其他@import在它前面 - 禁止使用
**、../、@{xxx}拼接路径——这些都会让缓存失效
缩小 less-loader 的处理范围
Webpack 默认会扫描整个项目目录，包括 node_modules 里的 .less 文件（比如 Ant Design 自带的 theme 文件），反复解析毫无必要。
- 用
include明确指定只处理src/less或src/styles目录 - 配合 Webpack 的
resolve.alias把@styles指向该目录，避免相对路径出错 - 如果用了 Ant Design，确保
style/themes/default/index.less中没有动态@import，否则缓存自动绕过
CI 环境必须关闭开发期配置
CI 构建里还开着 sourceMap、--verbose、sass --watch 类命令，等于让服务器白跑一堆无用逻辑。
- 检查 CI 脚本是否误调了
lessc --source-map或npm run dev - 确认
css-loader和less-loader的sourceMap在 CI 下为false - 禁用所有调试日志：Less 的
--verbose、Sass 的--trace在 CI 里只会刷屏和阻塞 I/O
最易被忽略的是：缓存目录路径是否被 Git 忽略、node_modules/.cache 是否在 CI 容器中持久化、以及 modifyVars 传入的值是否静态固化（而非运行时读 localStorage）。这些细节一错，前面所有配置都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
