Ant Design 自定义 CSS 主题时编译速度缓慢，这一问题困扰着众多前端开发者。许多人的第一反应是“主题变量过多导致的”，但实际根源更为直接——每次构建时，Webpack 都会对 style/themes/default/index.less 进行完整的解析处理，即便你只修改了一个 @primary-color，它依然会执行一遍完整的 Less 编译链路。这才是导致编译耗时的核心原因。
less-loader 的 modifyVars 必须搭配缓存目录使用
很多开发者只配置了 modifyVars 参数，却忽略了缓存设置，导致修改主题变量后依然触发全量编译，优化效果大打折扣。关键在于引导 less-loader 跳过那些从未发生变动的依赖文件。
- 在
webpack.config.js中为less-loader添加cacheDirectory选项，路径指向node_modules/antd/style/themes/default/。这样配置后，只有实际发生变更的文件才会被重新编译。 modifyVars中只传递真正需要覆盖的变量，例如{ 'primary-color': '#108ee9' }，切勿为了方便传入空对象或全量配置，否则缓存将失去意义。- 还需检查
style/themes/default/index.less中是否存在动态@import路径，比如@import "@{base}/mixins.less"这类写法。一旦出现动态路径，less-loader 的缓存机制就会失效，编译时间将再次回升。
禁用 cssinjs 生成，强制启用 CSS 变量模式
Ant Design 5.12+ 版本默认开启了 cssinjs 功能，它会在运行时将 Design Token 序列化为内联样式。这一阶段虽然不消耗编译时间，但会影响首次渲染性能。真正拖慢 Less 编译速度的是预处理环节，因此关闭 cssinjs 可以减少构建链路的干扰。
- 在
ConfigProvider中显式启用 CSS 变量模式： - 移除项目中所有直接引入
antd/dist/reset.css或antd/dist/antd.css的语句，改为import 'antd/dist/reset.css'配合import 'antd/dist/antd.variable.min.css'。 - 检查
package.json中是否误用了antd-dayjs-webpack-plugin这类插件，它们可能会拦截样式路径导致缓存被绕过，从而让编译时间功亏一篑。
主题变量必须从独立文件注入，而非运行时计算
一个常见的误区：将主题色写成 const theme = { primary: localStorage.getItem('theme') || '#1890ff' }，再传递给 ConfigProvider。这种写法会导致 Webpack 无法静态分析变量值，进而放弃缓存，每次构建都重新计算。
- 主题变量应该提前固化到构建时环境中，例如通过
DefinePlugin注入：new webpack.DefinePlugin({ '__PRIMARY_COLOR__': JSON.stringify('#108ee9') })。 - 然后在
style/themes/default/index.less中引用：@primary-color: __PRIMARY_COLOR__;。 - 注意不要在 Less 文件中调用
color(~"#{__PRIMARY_COLOR__}")这类函数，Less 无法对运行时字符串进行类型推导，会导致编译失败或缓存失效。
最后提及一个最容易被忽略的细节：Ant Design 的 style/themes/default/ 目录下存在 alias.less 文件，它会重新映射所有变量路径。如果自定义主题时没有同步更新该文件中的 @import 语句，缓存机制会悄然失效——编译时间回升，但控制台没有任何报错提示。这一点排查起来非常隐蔽，值得特别留意。
