Less编译后CSS体积暴增需控制嵌套、禁用.extend()、@import加(reference)；按需加载靠构建拆分+动态import()；变量用!default、Mixin加前缀；优化热更新需关javascriptEnabled并开cache。
Less编译后CSS体积暴增，怎么控制输出大小
Less本身不参与运行时，所有性能问题都出在编译阶段和产物体积上。盲目嵌套、滥用.extend()、无节制的@import会直接导致CSS重复、选择器爆炸、gzip前体积翻倍。
实操建议：
- 用
lessc --clean-css或构建工具插件（如less-plugin-clean-css）启用压缩，但注意clean-css默认会移除@charset，若项目含非UTF-8字体声明需加--keep-breaks保底 - 禁用
.extend()用于跨模块复用——它生成的选择器组合极难预测，改一处可能让10个组件样式多出200行；改用.mixin()+ 显式调用更可控 -
@import一律加(reference)标记，只导入变量/混合，避免隐式引入样式代码；真正需要的样式文件用单独@import显式声明
如何让Less支持按需加载，避免单页应用首屏样式冗余
Less是预编译工具，不提供运行时加载能力，所谓“按需”必须靠构建时拆分+动态import()配合实现。
常见错误现象：把所有Less文件一股脑@import进app.less，结果路由A用不到的按钮动画样式也打进首屏CSS里。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 按路由/功能域划分Less入口，例如
route-dashboard.less、widget-chart.less，每个入口只@import本域依赖 - Webpack中用
mini-css-extract-plugin配合import('./styles/route-dashboard.less')动态加载，Less文件必须被less-loader处理且不能含@import (reference)以外的全局副作用 - 避免在
variables.less里定义@font-face或@keyframes——它们会被所有引用该文件的模块重复输出，应单独抽成base/fonts.less并仅由主入口引入
Less变量和Mixin跨模块共享时，为什么经常出现样式覆盖或失效
根本原因是Less作用域模型和CSS本身无作用域的冲突：变量在@import时即求值，Mixin在调用时才展开，而不同模块的@import顺序稍有变化，结果就不可控。
使用场景：团队多人维护同一套UI库，各自写button.less、input.less，都依赖variables.less里的@primary-color，但某人本地改了变量却没同步到CI环境。
实操建议：
- 所有公共变量必须声明为
!default，例如@primary-color: #007bff !default;，下游模块可安全覆盖，上游修改不破坏兼容 - Mixin命名加前缀并限制参数数量，例如
.btn-variant(@bg, @border: transparent)比.theme()更易追溯调用链；避免带&嵌套的Mixin用于跨模块，它会把父选择器硬编码进输出 - 用
lessc --verbose检查编译日志，重点看File not found或Duplicate definition警告——后者常因两个模块分别@import 'mixins/reset'导致，应统一由根文件注入
Webpack + Less热更新慢，保存后要等3秒才刷新，怎么优化
不是Less慢，是less-loader默认开启javascriptEnabled且未配置缓存，每次编译都重读全部@import链，遇到node_modules里深路径的UI库（如ant-design的style/themes/default.less）就卡住。
性能影响：开发时每改一行变量，Webpack需重新解析20+层嵌套@import，CPU占用飙高，HMR延迟明显。
实操建议：
- 在
less-loader配置中关闭javascriptEnabled（除非真用@plugin），并强制开启cache：{ lessOptions: { javascriptEnabled: false }, cache: true } - 用
webpack.resolve.alias把常用主题路径映射到简短别名，例如{ '@ant-design': 'antd/lib/style/themes/default.less' }，减少@import路径解析开销 - 删除
package.json中devDependencies里未实际使用的Less相关插件（如less-plugin-autoprefix），旧版插件常阻塞loader链
最麻烦的是变量继承链过深——比如theme-dark.less → base.less → variables.less → node_modules/xxx/vars.less，这种结构改一个基础色就要重走四层，不如把最终计算值（如@btn-bg-hover）直接写死在组件级Less里，反而更快更稳。
