CSS如何优化CSS构建引入过程_通过Tree Shaking移除未用代码-css教程-PHP中文网

tree shaking 不能直接作用于 css，因其依赖 es module 静态分析，而 css 无导出语义且打包器不解析其内容；真正有效的方案是 purgecss 或 unocss 等基于模板中实际类名匹配的工具。

css如何优化css构建引入过程_通过tree shaking移除未用代码

Tree Shaking 能不能直接作用于 CSS

不能。Tree Shaking 是 JavaScript 打包器（如 Webpack、Rollup）基于 ES Module 静态结构做的死代码消除，它依赖 import/export 的可分析性。CSS 没有模块级导出语义，也没有运行时执行路径，所以打包器默认**完全不分析 CSS 内容是否被使用**——import './styles.css' 会被当作副作用导入，整个文件照单全收。

为什么 `purgecss` 或 `unocss` 才是实际解法

真正能删未用 CSS 的，是基于“源码中哪些类名/选择器实际出现”做白名单比对的工具。它们不依赖模块语法，而是扫描 HTML、JSX、Vue SFC 等模板中的字符串字面量（比如 class="btn primary"），再与 CSS 中的规则匹配。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

purgecss：需手动配置内容源路径和提取器，适合传统项目；注意 content 路径漏写会导致大量误删
unocss：按需生成 CSS，本质是“用到才生成”，无冗余问题；但要求重构 class 写法为原子化（如 text-center p-4 bg-blue-500）
两者都不处理动态拼接的 class（如 class={`btn ${isActive ? 'active' : ''}`}），需用 safelist 显式保留

Webpack + PostCSS 场景下如何接入 PurgeCSS

在 postcss.config.js 中启用 @fullhuman/postcss-purgecss 插件是最轻量方式，无需改构建配置主体：

module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.html',
        './src/**/*.vue',
        './src/**/*.jsx',
        './src/**/*.tsx'
      ],
      safelist: [/^data-v-/], // 保留 Vue scoped style 的属性选择器
      defaultExtractor: content => content.match(/[\w-/:]+(?

务必检查 content 是否覆盖所有模板文件，尤其注意 .svelte、.astro 等新格式需额外添加
defaultExtractor 默认正则不匹配带中划线的 BEM 类（如 header__title--large），建议换用 regex 或改用社区 extractor
开发环境建议关闭 PurgeCSS（通过 process.env.NODE_ENV === 'production' 控制），否则热更新样式会丢失