当前位置：首页 > 文章列表 > 文章 > 前端 > PurgeCSS优化样式，删除冗余CSS减小文件

PurgeCSS优化样式，删除冗余CSS减小文件

2025-12-27 09:09:41 0浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《PurgeCSS优化未使用样式，删除多余CSS减小文件》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

PurgeCSS通过扫描文件识别并移除未使用的CSS类，减小文件体积，提升性能。首先安装@fullhuman/postcss-purgecss，再在postcss.config.js中配置content路径如['.//.html', './src//.js']，确保覆盖所有模板文件。为避免误删，需处理动态类名，可自定义extractor正则匹配或使用whitelist/whitelistPatterns保留关键样式。仅在生产环境启用，可与Webpack、Vite、Next.js等工具集成，在构建时自动清理冗余CSS，通常减少70%以上体积。注意更新文件后重新构建，确保扫描准确。

CSS工具PurgeCSS如何优化未使用样式_使用PurgeCSS删除多余CSS减小文件

PurgeCSS 通过扫描 HTML、JavaScript 或其他模板文件，识别出实际使用的 CSS 类名，并移除未被引用的样式规则，从而大幅减小 CSS 文件体积。这对于使用大型 CSS 框架（如 Tailwind CSS、Bootstrap）的项目尤其有效，能显著提升页面加载速度和性能表现。

如何使用 PurgeCSS 基本配置

要开始使用 PurgeCSS，首先安装依赖：

npm install @fullhuman/postcss-purgecss --save-dev

然后在 PostCSS 配置中加入 PurgeCSS 插件，例如在 postcss.config.js 中：

const purgecss = require('@fullhuman/postcss-purgecss')({ content: ['./**/*.html', './src/**/*.js'], // 扫描所有HTML和JS文件中的类名 defaultExtractor: content => content.match(/[\w-/:]+(?

这样在生产环境中构建时，PurgeCSS 会自动清理未使用的 CSS。

精准匹配内容路径避免误删样式

如果 PurgeCSS 扫描范围不准确，可能导致有用的样式被错误删除。确保 content 字段覆盖所有可能包含类名的文件：

包括 .html、.js、.jsx、.vue、.svelte 等视图层文件
使用 glob 模式匹配深层目录，如 './pages/**/*.js'
动态类名需特别处理，比如用正则提取 btn-(primary|secondary)

可通过自定义 extractor 提高识别准确率：

defaultExtractor: content => { const broadMatches = content.match(/[^"'`\s]*[^"'`\s:]/g) || [] const innerMatches = content.match(/[^"'`\s.()]*[^"'`\s.():]/g) || [] return [...broadMatches, ...innerMatches] }