webpack 默认不摇 css，因其tree shaking仅作用于es模块的import/export静态结构，而css无导出语义、被视为副作用导入，构建器不解析其内部选择器；真正剔除未用样式需依赖purgecss等工具扫描源码中实际出现的类名字符串。
为什么 Webpack 默认不摇 CSS
Webpack 原生只对 JS 做 Tree Shaking，CSS 是完全独立的处理链。它不会分析 div.className = "box-small" 这种字符串拼接、classList.add("box-small") 或模板中动态 class 绑定，也就无法判断哪些 CSS 类实际被用到了。所以你得靠外部工具做“CSS 类名静态扫描”——核心是：告诉工具“去哪找 HTML/Vue/JS 里出现的类名”，再让它比对 CSS 文件里定义了但没出现的规则。
用 PurgeCSSPlugin 配置 CSS Tree Shaking
这是目前最稳定、社区验证最多的方案，尤其适合 Vue 和多页应用。注意它不是 Webpack 内置插件，必须手动安装和配置：
npm install purgecss-webpack-plugin glob-all --save-dev- 确保你用的是 Webpack 4+，且 CSS 已通过
MiniCssExtractPlugin提取为独立文件（否则 PurgeCSS 找不到目标 CSS） - 路径匹配要覆盖所有可能写 class 的地方：
src/**/*.vue、src/**/*.html、src/**/*.js（如果 JS 里有字符串 class 操作） - 不要漏掉第三方 UI 库的源码路径，比如
node_modules/element-plus/lib/components/**/*，否则组件样式会被误删
示例片段（webpack.config.js）：
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');
// 生产环境才启用
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new PurgeCSSPlugin({
paths: glob.sync([
path.join(__dirname, './src/**/*.vue'),
path.join(__dirname, './src/**/*.html'),
path.join(__dirname, './src/**/*.js')
]),
safelist: [/^el-/, /^van-/], // 保留 Element Plus / Vant 的类前缀
keyframes: true,
fontFace: true
})
);
}
Vue CLI 项目怎么加？别碰 chainWebpack 的 plugin 名字
Vue CLI 的 chainWebpack 对插件名做了封装，直接写 config.plugin('PurgeCSSPlugin') 会失败——它根本不存在这个注册名。正确做法是用 config.plugin('mini-css-extract') 后续追加，或改用 configureWebpack 合并：
- 在
vue.config.js中，优先用configureWebpack: (config) => { ... }方式注入插件 - 确保
PurgeCSSPlugin在MiniCssExtractPlugin之后执行，否则它读不到提取出的 CSS 文件 - 如果你用了
css.loaderOptions.postcss，记得 PurgeCSS 不处理 PostCSS 插件生成的内容（比如 Tailwind 的 @apply），这类需单独配置
容易被忽略的副作用陷阱
很多项目加了 PurgeCSS 后，首页白屏或样式错乱，问题常出在两处：
-
sideEffects配置太激进：如果你在package.json里写了"sideEffects": false，Webpack 可能把import './index.css'整个干掉——因为 CSS 导入本身就算副作用。必须显式列出："sideEffects": ["*.css", "*.scss"] - 动态类名没进
safelist：比如:class="['item', `item--${type}`]"，item--foo这种运行时拼出来的类名，PurgeCSS 默认看不到，得用正则写进safelist - 关键 CSS 被删：某些初始化样式（如重置 body margin、字体定义）可能没在任何模板里显式使用，但又是全局必需的。建议把基础重置 CSS 单独抽成
base.css并加入safelist或排除在 PurgeCSS 范围外
真正难的不是配通，而是确认“删掉的确实没用”——上线前务必用 npm run build && npx serve -s dist 全路径走查，别只看首页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
