--style=compressed仅删除空格换行，无法解决选择器爆炸、重复声明、未用类等问题；真正根源在于源码结构（如@extend滥用、深层嵌套）和构建链路缺失裁剪（如purgecss），需编译前瘦身与编译后裁剪双管齐下。
开 --style=compressed 不能解决性能问题，它只删空格换行，对选择器爆炸、重复声明、未用类完全无效。真正卡顿和体积膨胀的根因在 Sass 源码结构和构建链路设计。
为什么 compressed 模式对性能没帮助
浏览器解析 CSS 的瓶颈从来不是“有没有换行”，而是选择器长度、规则数量、匹配复杂度。而 compressed 输出仍保留所有嵌套生成的后代选择器（如 .layout .sidebar .nav .item a），仍保留 100 个 .m-1 到 .m-100 工具类，仍保留被 @extend 复制出的 47 份 margin: 0.5rem 声明。
- gzip 后体积差异通常
- Chrome DevTools 的 “Coverage” 面板常显示 >60% 的 CSS 从未被应用过
- 开启
compressed会破坏 sourceMap 映射，调试时无法定位原始.scss行号
停用 @extend，改用 %placeholder + 自定义属性组合
@extend 是体积膨胀重灾区：它不共享声明，只拼接选择器；跨上下文调用时直接触发组合爆炸（.card .btn, .modal .btn, .form .btn）；且 cssnano 无法合并不同选择器块里的相同样式。
- 仅对无状态、无上下文、可直接加到 HTML 的原子行为使用
%，例如%sr-only、%clearfix - 禁用含
:hover、@media、&__header结构的占位符 —— 它们必然导致冗余输出 - 把颜色、间距、圆角等视觉值抽成 CSS 自定义属性：
:root { --space-sm: 0.5rem; }，组件内统一用margin: var(--space-sm)
按需导入 + sideEffects 声明 + PurgeCSS 后置裁剪
Sass 本身无 tree-shaking，@import 是文本拼接，全量引入 bootstrap.scss 就等于把全部 30+ 组件塞进编译流。Webpack 也默认不敢删 SCSS 文件，除非你明确告诉它“这些只是样式，删了没副作用”。
- 跳过框架入口文件，手动
@use子模块：@use "bootstrap/scss/functions"、@use "bootstrap/scss/grid" - 在
package.json中添加："sideEffects": ["*.scss", "src/styles/**/*.scss"]（确保不含真实副作用） - PurgeCSS 必须放在 Sass 编译之后、CSS 压缩之前；
content字段必须覆盖所有模板路径，例如["src/**/*.{vue,html,js}"]，漏一个就可能保留整套未用组件样式
嵌套层级必须限制在 3 层以内
每深一层嵌套，Sass 就复制一次父选择器前缀。.card { .header { h1 { } } } 看似简洁，但编译后是 .card .header h1；若该结构被 5 个组件复用，就会产出 5 组完全相同的长选择器链，严重拖慢浏览器样式计算。
- 检查
&前是否有空格：有空格 → 后代选择器（危险）；无空格 → BEM 拼接（安全） - 用子选择器
>显式切断继承：.card > .header > h1，权重更低、匹配更快、更易覆盖 - 媒体查询别套在嵌套里：
.btn { @media (min-width: 768px) { &--large { } } }会把响应式逻辑绑定到具体类名上，应改为独立断点类或自定义属性控制
最常被忽略的一点：PurgeCSS 和 @extend 一起用，反而会让 cssnano 失效——因为 @extend 把样式分散到多个选择器块中，而 cssnano 只合并同一规则块内的重复声明。体积问题不在“怎么压”，而在“一开始就不该生成那么多”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
