less公共文件体积过大本质是被反复引入展开输出，需用@import (once)和(reference)控制导入、禁用通配符、抽离副作用规则，并配--clean-css="--s1 --advanced --compatibility '*'"压缩。
Less 公共文件过大，本质是它被所有入口反复引入、展开、输出，最终把非首屏样式也塞进关键 CSS 里——这不是文件“大”，而是“不该进来的全进来了”。关掉三处默认行为，体积能压掉 40%～70%。
为什么 variables.less 或 mixins.less 一引入就拖慢首屏
因为 @import "variables.less" 在每个组件文件里出现一次，Less 就会展开一次变量求值、生成一次对应 CSS（哪怕只用了其中 1 个变量）。更糟的是，如果 variables.less 里还含了 @font-face 或 @keyframes，它们会被复制 N 份到最终 CSS 中。
- 所有全局配置类（如
.sr-only、.clearfix）必须用@import (once)，路径必须完全一致，否则无效 -
@import (reference)才是真正“只提供定义、不输出 CSS”的方式，适合mixins.less和functions.less - 禁止在
variables.less里写任何带副作用的规则；字体、动画、重置样式应单独抽成base/fonts.less、base/animations.less，仅由主入口引入
如何让 .btn 样式不进首屏 CSS，但又能在需要时调用
核心不是删掉 .btn，而是让它不随主入口自动输出。靠 @import (reference) + :extend() 组合，或改用 mixin 调用。
- 把
.btn定义放进base/_buttons.less，并用@import (reference) "base/_buttons"引入 - 在路由级 Less 文件（如
route-admin.less）中，用.my-action-btn:extend(.btn)，这样只有该路由用到时，.btn的声明才被合并进输出 - 若需动态控制，改用
.btn-sm() { ... }mixin，在需要的地方显式调用，避免无条件展开 - 检查编译后 CSS：如果看到
.my-action-btn, .btn { ... }这种合并块，说明:extend()成功；如果只有孤立的.my-action-btn { ... }，说明.btn没被输出（路径错或没加(reference)）
lessc 命令行编译时哪些参数会悄悄放大体积
--compress 是最常被误用的开关——它只删空格换行，对选择器重复、未用规则、嵌套膨胀完全没用。真正起效的是 --clean-css，但参数配错反而增大体积。
- 必须安装插件：
npm install -g less-plugin-clean-css - 基础命令要带完整参数：
lessc app.less --clean-css="--s1 --advanced --compatibility '*'"，缺--advanced就不会合并选择器 -
--s1保留关键分号，防止 IE8 等老浏览器解析失败；--compatibility '*'避免rgba()被转成 hex 后丢透明度 - 如果项目含中文注释或
@charset "GBK"，必须加--keep-breaks，否则--clean-css可能误删编码声明
Webpack 里 less-loader 怎么避免公共文件失控
Webpack 默认不会识别 @import (once)，也不会阻止通配符导入。必须靠 loader 配置和构建逻辑兜底。
- 启用
strictImports: true（在less-loaderoptions 中），让缺失的@import立即报错，而不是静默跳过导致样式丢失 - 禁用
@import "components/*.less"：标准 Less 不支持通配符，Webpack 的resolve.alias或glob-import插件会把它展开为全部文件，彻底废掉按需控制 - 用
mini-css-extract-plugin配合动态import('./styles/route-xxx.less')，确保只有当前路由的样式被打包进 chunk，而非全量注入 - 所有
@import (reference)文件不能含副作用（如@font-face），否则 Webpack 无法安全剔除未引用模块
真正卡首屏的从来不是 .btn 写得不够优雅，而是它被 5 个地方各自 @import、各自 :extend()、又各自输出一遍。Less 没有运行时作用域，它的“复用”全靠编译时路径收敛和导入策略控制——这点一旦松动，体积和首屏时间就会指数级恶化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
