Tree Shaking 本身不能剔除未引用的 CSS 或 Sass 规则，因其仅分析 JS 的 ES Module 导入导出，而 CSS/Sass 无导出语义、不参与依赖图构建；真正有效的是 PurgeCSS、Unocss 等基于模板类名扫描的工具。
Tree Shaking 本身不能用于剔除未引用的 CSS 或 Sass 规则。它只对 JavaScript 的 ES Module 导出/导入做静态分析，而 CSS/Sass 没有模块导出语义，也不参与 JS 的依赖图构建——import './button.scss' 在 Webpack 或 Vite 中始终被视为带副作用的导入，整个文件会被完整保留。
为什么 Tree Shaking 对 CSS 失效
CSS 文件不导出任何值，打包器无法判断其中某条规则（如 .btn-primary）是否被 HTML、JS 或模板实际使用。即使项目里完全没出现这个类名，构建工具也不会删它。Sass 编译后的 CSS 同样面临这个问题，变量、mixin、嵌套等预处理特性在编译后即消失，静态分析无从下手。
真正有效的 CSS 按需提取方案
不是靠 Tree Shaking，而是靠“类名匹配 + 模板扫描”机制：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
PurgeCSS：扫描 HTML、JSX、Vue、TSX 等源码中所有出现的类名（包括字符串拼接），再反向比对 CSS 文件里的选择器，删除未命中项；需配置
safelist应对动态类（如class="${type}-btn"） -
Unocss：不写传统 CSS，改用原子化类名（如
text-center p-4 bg-blue-500），构建时按需生成对应 CSS 规则；天然规避动态类识别难题，Vite 用户首选 -
Tailwind CLI + JIT 模式：类似 Unocss 思路，启用
content配置指定模板路径，仅生成实际用到的工具类
配合运行时验证提升准确率
静态扫描可能漏掉通过 JS 动态添加、或在特定用户交互后才生效的类名。建议补充：
立即学习“Java免费学习笔记（深入）”；
- 用 Puppeteer 或 Playwright 加载页面并触发关键操作，抓取
document.styleSheets中真正应用的规则 - 结合 Chrome DevTools 的 Coverage 面板，在多状态（登录/未登录、暗色/亮色模式）下录制，确认哪些 CSS 被加载但从未执行
- CI 流程中接入 PurgeCSS 差分检查，拦截新增却未使用的样式片段
Sass 项目的特别注意事项
Sass 本身不解决“未使用规则”问题，反而可能加剧冗余（比如全局 @import 大量基础文件）。优化要点包括：
- 避免在
_index.scss中一次性@import所有模块；改为组件级按需引入（如Button.module.scss） - 将可复用的样式逻辑抽成 Sass 函数或 mixin，而非生成大量静态规则
- 构建前先用 Sass 编译为标准 CSS，再交由 PurgeCSS 或 Unocss 处理
