Less 编译变慢主因是默认配置冗余:重解析@import树、监听node_modules、生成冗余source map;关闭source map、限定include-path、启用strict-math及cache/thread等优化可提速2–5倍。

Less 编译变慢,90% 不是语法或 mixin 写法问题,而是默认配置在项目变大后反复做无用功:重解析全部 @import 树、监听 node_modules、生成冗余 source map。关掉三处开关,编译可提速 2–5 倍。
lessc 命令行编译卡顿:关 source map、限路径、禁严格数学
默认 lessc 启用 --source-map、--strict-math=off 和全量 @import 解析,这些在非调试阶段全是负担。
-
--no-source-map必加:调试以外场景,map 文件不参与运行,却拖慢依赖遍历 -
--strict-math=on替代默认off:避免68 / 37.5rem这类未括号表达式触发运行时推导 -
--include-path=./src/less显式限定路径:防止@import "button.less"去node_modules或当前目录外瞎找 - watch 模式加
--disable-dotfiles:跳过.button.less这类备份文件,避免误触发重编译
Webpack 中 less-loader 越改越慢:必须开 cache 和 thread
Webpack 5 的 less-loader 默认关闭缓存和多线程,每次改一个变量,整个 @import 链都重解析 AST——这不是 Less 慢,是 loader 没配对。
-
cache: true:启用后会在node_modules/.cache/less-loader存 AST 和 CSS 输出,二次构建跳过 tokenize + parse -
thread: true:启用worker_threads,对含高频.btn-base()这类 mixin 的文件提速明显 -
sourceMap: false:CI 或非调试构建中必须关,否则每个.less都额外生成 map 文件 - 禁用
@import "mixins/**/*.less":glob 匹配让缓存无法静态推断依赖,任一文件 mtime 变,整棵树失效
Ant Design 主题定制编译巨慢:缓存目录 + 静态变量 + 关 cssinjs
改一个 @primary-color 就全量重编 antd/style/themes/default/index.less,根本原因是没让 less-loader 知道哪些文件实际变了。
立即学习“前端免费学习笔记(深入)”;
- 为
less-loader配cacheDirectory,指向node_modules/antd/style/themes/default/ -
modifyVars只传真正要覆盖的变量,如{ 'primary-color': '#108ee9' },别传空对象或全量主题 - 删掉
import 'antd/dist/antd.css',改用import 'antd/dist/antd.variable.min.css'并开启cssVar: true - 主题变量必须静态固化:用
DefinePlugin注入__PRIMARY_COLOR__,在index.less中写@primary-color: __PRIMARY_COLOR__;
增量编译失效:手动缓存 tree + 严格收口依赖
Less 本身不支持增量,所谓“只编译改了的文件”是错觉;真正有效的是跳过未变更的子树,这需要你控制缓存粒度和依赖收敛。
- 所有公共变量和 mixin 必须收口到单一
_common.less,且每个业务文件第一行只能是@import "_common.less" - 用
Map手动缓存{ filePath → { css, tree, mtime } },读文件前先比对mtime -
less.render()调用时显式传tree: cachedTree,跳过解析,仅重计算 CSS -
paths: ['./src/less']必须显式传,否则@import路径解析失败,缓存直接失效
最容易被忽略的是 @import 路径是否收敛——只要有一个 @import "@{base}/theme.less" 或 ../ 跳转,整个缓存链就断了。编译快慢,从来不由语法决定,而由你能否让工具明确知道“哪些没变”。



















