直接@import多个less文件会拖慢首屏渲染，因其同步递归解析、生成多个css chunk导致浏览器串行加载，且未用(reference)时变量/mixin重复注入，增大体积并降低热更新效率。
为什么直接 @import 多个 Less 文件会拖慢首屏渲染
Less 的 @import 默认是同步、递归解析的，即使你只在入口文件里写一行 @import "mixins.less";，只要它内部又 @import 了其他文件，整个依赖树都会在编译时被拉进来。更关键的是：Webpack 或 Vite 在处理 .less 文件时，若没做配置，会把每个 @import 当作独立模块处理，导致 CSS 提取插件（如 mini-css-extract-plugin）生成多个小 chunk，而浏览器必须串行下载、解析、执行——首屏关键 CSS 就被拆散了。
- 所有
@import都在编译期展开，不产生运行时开销，但会显著增加输出 CSS 体积和重复率 - 未标记
@import (reference)的公共文件（如variables.less）会被多次注入，造成样式冗余 - 开发时热更新变慢，因为一个基础变量改动，可能触发十几个组件样式的重编译
用 @import (reference) 隔离纯逻辑文件
这是 Less 提供的“仅导入、不输出 CSS”的机制，专为 variables、mixins、functions 这类纯定义文件设计。它让这些文件只参与编译计算，不向最终 CSS 注入任何内容。
正确写法示例：
// variables.less
@primary-color: #007bff;
@border-radius-sm: 4px;
// mixins.less
.border-box() {
box-sizing: border-box;
}
// index.less
@import (reference) "variables.less";
@import (reference) "mixins.less";
.button {
background: @primary-color;
.border-box();
}
- 必须对所有只含变量/mixin/function 的文件加
(reference)，否则它们会在每个引用处重复输出 CSS -
(reference)不支持嵌套 import：如果mixins.less内部@import "variables.less"，那它必须也加(reference)，否则外层@import (reference) "mixins.less"无效 - Vite 用户注意：
vite-plugin-less默认支持(reference)，但旧版 Webpack +less-loader需确保版本 ≥ 7.3.0
按功能切分 + 主动控制输出时机
不要把所有公共样式都塞进一个 common.less。首屏真正需要的只有重置、基础排版、按钮/输入框等原子组件样式；动画、图标、暗黑模式等非关键样式应延迟加载或条件编译。
- 拆出
critical.less：只包含@import (reference)和少量必须内联的规则（如html { font-size: ... }），供index.html中<style></style>直接内联 - 把
@media查询、@keyframes、主题色变量覆盖逻辑放到单独文件，用 JS 动态import()加载，避免阻塞渲染 - 慎用
@import (inline)：它只是把文件内容原样插入，不经过 Less 编译，无法使用变量或 mixin，仅适合引入第三方 CSS
检查输出结果是否真去重了
最可靠的验证方式不是看 Less 文件结构，而是 inspect 最终生成的 CSS 字节和选择器重复率。常见陷阱是：你以为用了 (reference) 就安全了，但某个组件样式里写了 @import "variables.less"（漏了 (reference)），整份变量定义就又悄悄输出了一遍。
- 用
grep -o "\.button {" dist/main.css | wc -l快速统计某选择器出现次数 - 打开 Chrome DevTools → Network → 找到 CSS 请求 → 右键 “Copy response” → 粘贴到编辑器搜索
@primary-color或变量名，确认只出现在计算后的位置，而非多处字符串 - Webpack 用户可启用
css-minimizer-webpack-plugin的verbose模式，查看压缩前原始 CSS 是否已含冗余
@import (reference)，而是团队协作中没人记得谁在哪改过 mixins.less，结果加了个带副作用的 .clearfix()，导致所有引用它的页面都多了一段不可见的伪元素——这种问题不会报错，只会让首屏多出 200B 无意义 CSS，且极难定位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
