<p>MPA 中 PurgeCSS 关键在精准删除：需显式配置 content 覆盖所有 HTML/模板文件，safelist 兜底 data-* 属性及 JS 动态类，区分 dev/build 环境并禁用 JIT 干扰，否则易误删导致功能异常。</p>
多页面项目（MPA）用 PurgeCSS 优化 CSS，关键不是“能不能删”，而是“删得准不准”——它不像单页应用（SPA）有统一的入口和组件树，MPA 的 HTML 文件分散、模板引擎各异、JS 动态类生成路径不一，稍有遗漏就会误删关键样式。
content 配置必须覆盖所有 HTML 入口和动态模板文件
PurgeCSS 只认你让它看的文件，不主动猜。MPA 常见问题：只扫 index.html，漏掉 about.html、product/list.html、甚至 EJS/PHP 模板生成的 pages/*.html.ejs。
- 显式列出所有静态 HTML：
./public/**/*.html、./src/pages/**/*.html - 模板引擎文件必须加进 content：
./src/templates/**/*.{ejs,pug,php}（PurgeCSS 不解析 PHP 逻辑，但能提取字符串中的 class 字面量） - 如果用了服务端渲染（如 Express + EJS），且 class 是 JS 拼接的（如
<div class="card<%= active ? ' card--active' : '' %>">），需在defaultExtractor中增强匹配：/[a-z-]+(?:\s+[a-z-]+)*/gi覆盖空格分隔的类名 - 避免写
./pages/*.html这种浅层 glob——子目录下的pages/blog/post.html就会被跳过
safelist 必须兜底 data-* 属性和 JS 驱动的类名
MPA 中大量交互依赖 data- 属性触发 JS 行为（如 Bootstrap 的 data-bs-toggle="modal"），这些属性本身不会出现在 class 列表里，但对应的 CSS 类（如 .modal、.dropdown-menu）会被 PurgeCSS 当作“未使用”干掉。
- 在
safelist中加正则：/^data-bs-[a-z-]+$/和/^(modal|dropdown|tooltip|popover)$/ - 保留 JS 动态添加的类：
['fade', 'show', 'collapsing', 'offcanvas']（Bootstrap 5 常见状态类） - 如果用了 jQuery 插件（如 datepicker），其 class 名如
ui-datepicker不在你源码中出现，就得硬加进 safelist 或把插件 JS 路径加入content - 不要用宽泛正则如
/^.*$/—— 这等于关掉 PurgeCSS
构建流程要区分 dev 与 build，禁用 JIT 干扰
MPA 通常不用 Tailwind JIT，但如果你混用了 Tailwind 工具类，又没走生产构建，JIT 会退化为全量输出，导致 PurgeCSS 扫到的 class 太多，反而不敢删。
立即学习“前端免费学习笔记（深入）”；
- 确保
process.env.NODE_ENV === 'production'时才启用 PurgeCSS 插件，开发阶段完全绕过 - 禁用 Tailwind 的 JIT 模式（设
mode: 'legacy'）或明确指定content路径，避免它自己扫描一遍再被 PurgeCSS 再扫一遍 - 验证是否真生效：构建后检查输出 CSS 中是否存在大量冷门类（如
.bg-gradient-to-br、.first-letter:font-bold），若存在，说明 PurgeCSS 根本没运行或 content 没命中 - 临时在某个 HTML 文件里加一行
<div class="bg-hotpink text-9xl">，构建后 grep 输出文件——如果真出现了，说明 PurgeCSS 没起作用或被其他插件覆盖
MPA 的 PurgeCSS 配置最脆弱的点在于“扫描盲区”：一个漏掉的 .ejs 文件、一条没兜底的 data-bs- 属性、一次开发环境误构建，都会让优化失效甚至破坏功能。别信体积数字，要打开每个页面、点开每个下拉菜单、触发每种 JS 状态去验证。
