必须显式配置sassoptions.outputstyle: 'compressed'且sourcemap: false，因sass默认outputstyle为'nested'、sourcemap默认开启，二者不随环境自动切换；若未手动设置，scss层输出冗余expanded格式并附加base64映射，导致后续压缩事倍功半。
必须显式配置 sassOptions.outputStyle: 'compressed'，否则无论后续加多少压缩插件，SCSS 层输出的仍是冗余的 expanded 格式——这是体积失控的第一道闸门没关紧。
为什么 css-minimizer-webpack-plugin 默认不生效
Webpack 5 不会对 CSS 自动启用压缩，哪怕 mode: "production" 已设。插件必须显式注册，且只对独立 CSS 文件起作用：
- 只装
css-minimizer-webpack-plugin不够，必须搭配MiniCssExtractPlugin提取 CSS；否则 CSS 还在 JS bundle 里，插件无目标可压 - 插件实例必须放在
optimization.minimizer数组中，写进plugins字段会被完全忽略 - 若项目仍用
style-loader注入 DOM，那根本没有生成 .css 文件，插件根本不会运行 - 验证是否生效：临时把
outputStyle改成'expanded'，看编译出的 CSS 是否带缩进和空行——如果是，说明 Sass 配置已生效；再对比开启css-minimizer-webpack-plugin后文件大小是否变化
sassOptions.outputStyle 必须手动写，不能依赖环境或 loader 默认值
sassOptions.outputStyle 是 Sass 层唯一的格式开关，它只删空格、换行、注释，不合并规则也不剔未用类——但它必须先执行。后续所有压缩（如 cssnano）都基于它输出的内容做二次处理。
- 默认值是
'nested'，不是'compressed'；它不感知构建环境，也不会被css-minimizer-webpack-plugin或cssnano反向影响 - Webpack 项目中，要写在
module.rules.use[loaderIndex].options.sassOptions下；Vue CLI 则嵌套在css.loaderOptions.sass.sassOptions里 - 写错位置（比如塞进
webpack.config.js顶层或css-minimizer配置里）会被 Sass 编译器直接忽略 - 命令行直编译时，必须加
--style=compressed --no-source-map，否则 base64 sourceMap 可能额外增加 100KB+
sourceMap 和 additionalData 是体积暗雷
开启 sourceMap 会让每个 SCSS 文件生成 base64 编码的映射内容，直接追加在最终 CSS 末尾。中等项目轻松多出 80–150 KB，远超压缩收益。
-
sourceMap: false不是可选项，是必选项；别信某些版本“默认关闭”的传言——dart-sass新版倾向保守开启 -
additionalData中若含@debug或@warn，在compressed模式下会被静默丢弃；你本地看到日志，上线却毫无反应，容易误判逻辑失效 - 更安全做法：把调试逻辑抽离成独立的
_debug.scss，仅在 dev 环境@use，且不参与 production 构建 - 所有
@debug/@warn必须清理干净，或用条件包裹：@if $env == 'dev' { @debug '' }
真正卡住体积的从来不在“怎么压”，而在 Sass 源码结构本身：深层嵌套、滥用 @extend、全量 @import、循环生成工具类……这些在 compressed 阶段无法修复，只会被原样保留。压缩链必须是 Sass → PostCSS → cssnano，缺一不可，但源头控制永远比后期补救更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
