Tree Shaking 对 CSS 完全无效，因其仅分析 JS 的 import/export 静态结构，而 CSS 无导出语义、被视为副作用导入；所谓“CSS Tree Shaking”实为类名扫描（如 Tailwind content 配置）或按需生成（如 UnoCSS），需专用工具配合动态类名保护等配置。
Tree Shaking 本身不能剔除样式文件或 CSS Modules 中的“死代码”，因为它只作用于 JavaScript 的 export/import 静态结构，而 CSS 没有导出语义、不参与模块依赖图分析。所谓“CSS Tree Shaking”是误称，实际是类名扫描 + 按需生成，需借助专用工具实现，且必须处理动态类名等边界情况。
为什么标准 Tree Shaking 对 CSS 完全无效
CSS 文件（如 import './Button.module.css' 或 import './index.css'）在打包器中被视为“副作用导入”——只要写了这行 import，整个文件内容就会被保留，无论其中定义的类是否在模板里出现过。原因包括：
- CSS 规则本身不导出任何值，无法被
import引用，构建工具无法建立调用链 - HTML 或 JSX 中的
className="btn primary"是字符串字面量，不是模块引用，静态分析无法关联到 CSS 文件内的.primary规则 - 像
clsx、twMerge或模板字符串拼接的类名（如class={`card card--${size}`}）更难被自动识别
Tailwind 用户：靠 content 配置驱动类名扫描
Tailwind 的“按需生成”不是 Tree Shaking，而是构建时扫描源码中所有出现的类名字符串，并仅生成对应 CSS。关键在 tailwind.config.js 的 content 字段：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 必须覆盖全部模板路径：
content: ['./src/**/*.{js,jsx,ts,tsx,html,vue}'] - 动态类名需显式保护：用
safelist写正则，例如/^is-/匹配is-active、is-hidden - 避免在配置中遗漏
TAILWIND_MODE=watch开发模式，否则热更新可能跳过扫描
CSS Modules 或纯 CSS 项目：用 PurgeCSS 或 Unocss 替代
对非 Tailwind 项目，推荐以下两种落地方式：
立即学习“Java免费学习笔记（深入）”；
-
PurgeCSS（插件形式）：配合 Webpack/Vite/PostCSS 使用，通过
content扫描源码，css指定待清理的 CSS 输入。需手动配置defaultExtractor适配自定义类名规则（如 BEM） -
Unocss（推荐 Vite 用户）：不扫描已有 CSS，而是运行时解析模板中的原子类（如
text-red-500），按需生成最小 CSS。天然支持动态类名，无需safelist，也规避了@import不生效的问题
安全剔除的关键配置提醒
无论选哪种方案，漏掉以下任一环节都会导致样式丢失：
- 扫描路径未包含所有模板文件（如忽略
.mdx、.astro或服务端渲染的 HTML 模板） - 没处理第三方组件库的类名（如 Ant Design 的
ant-btn），需加入safelist或启用其官方 preset - CSS 文件含
@import外部样式表时，PurgeCSS 默认不递归解析，应改用 PostCSS 流程或转为直接引入 - 将样式文件错误地写进
sideEffects: false——CSS 是典型副作用，必须保留在sideEffects数组中，例如"*.css"
