Less编译变慢主因是默认启用source map、strict-math=off及watch全量扫描@import树;关闭--source-map、改--strict-math=on、限定--include-path、按需引入、启用less-loader缓存与多线程、固化AntD变量、改用Node API增量编译可提速2–5倍。

Less编译越改越慢,不是语法写得复杂,而是默认行为在大型项目里反复做三件事:重解析全部 @import 树、监听 node_modules 里的无关文件、生成调试用的 source map。关掉这三项,多数项目能提速 2–5 倍。
lessc 命令行编译卡住或越来越慢
根本原因是 lessc 默认开启 --source-map、--strict-math=off,且 --watch 模式会递归扫描所有 @import 路径下的文件——包括 node_modules/antd/less 这类从不变更的目录。
- 非调试阶段必须加
--no-source-map:map 文件本身不耗时,但源码路径解析会拖慢整个依赖遍历 - 把
--strict-math=off改成--strict-math=on:避免运行时推导数学表达式,提前暴露错误,也省掉解析期计算 -
--watch时显式限定范围:lessc --watch --include-path=./src/less --disable-dotfiles ./src/less/main.less,跳过隐藏文件和第三方库 - 根文件里别
@import "bootstrap/less/bootstrap.less",改用按需引入:@import (reference) "./variables.less"; @import "./components/button.less";
Webpack 中 less-loader 编译变慢
Webpack 5 的 less-loader 默认不启用缓存和多线程,每次改一个变量,整个 @import 树都得重解析 AST。这不是 Less 慢,是 loader 没配对。
- 必须设
cache: true:否则node_modules/.cache/less-loader目录压根不会生成,AST 和 CSS 输出全丢弃 - 必须开
thread: true:启用worker_threads,尤其对含高频.btn-base()这类 mixin 的文件效果明显 -
sourceMap: false:开发阶段非调试时关掉,否则每个.less都额外生成 map 文件 - 禁用动态
@import:如@import "mixins/**/*.less"或@import "@{base}/theme.less",路径无法静态推断,缓存直接失效
Ant Design 主题定制编译耗时高
Ant Design 自定义主题慢,不是变量太多,而是每次构建都全量重编译 style/themes/default/index.less,且未固化变量值。
立即学习“前端免费学习笔记(深入)”;
-
modifyVars必须配合cacheDirectory使用,否则改一个颜色仍触发全量编译 - 只传真正要覆盖的变量,例如
{ 'primary-color': '#108ee9' },别传空对象或全量主题配置 - 主题变量必须静态固化:用
DefinePlugin注入__PRIMARY_COLOR__,再在index.less里写@primary-color: __PRIMARY_COLOR__; - 删掉
import 'antd/dist/antd.css',改用import 'antd/dist/antd.variable.min.css',避免 cssinjs 干扰构建链路 - 检查
style/themes/default/alias.less是否被意外修改,它会重新映射所有变量路径,导致缓存绕过
用 Node.js API 替代命令行调用
命令行每次调用都 spawn 新进程,有启动开销;而 less.render() 可复用 V8 实例、手动缓存 AST、支持增量比对,实测省 200–400ms/次。
- 必须手动管理缓存:用
Map存{ filePath → { css, tree, mtime } },每次读文件前先比对mtime - 调用时显式传
paths: ['./src/less'],否则@import路径解析失败,缓存失效 - 禁用
javascriptEnabled: true:它让缓存不可靠,且无法做静态分析 - 可传
tree: cachedTree跳过解析,仅重计算 CSS —— 这才是真正的“增量”
最容易被忽略的是 @import 路径收敛和变量作用域固化:路径发散会让缓存失效,变量动态计算会让 Webpack 放弃静态分析。这两点不处理,其他优化都是在给漏水的桶打补丁。


















