当前位置：首页 > backend >正文

PurgeCSS：CSS瘦身优化性能终极解决方案

backend 2025/6/19 9:50:02

深度解析PurgeCSS：优化CSS性能的终极解决方案

一、PurgeCSS是什么？

PurgeCSS是一个强大的工具，用于从项目中移除未使用的CSS代码。它通过分析HTML、JavaScript和其他模板文件，精确识别哪些CSS选择器被实际使用，然后智能地删除那些从未被引用的样式规则。这一过程显著减少了CSS文件的体积，从而提升了网站的加载速度和性能。

PurgeCSS中文文档

https://purgecss.uihtm.com

核心功能

代码瘦身：删除未使用的CSS，减少文件大小
智能分析：通过提取器(Extractors)识别动态生成的类名
安全列表(Safelisting)：保留特定的选择器，防止误删
集成友好：支持JavaScript API、CLI和主流构建工具

二、PurgeCSS能做什么？

PurgeCSS解决了现代前端开发中的一个常见问题：CSS文件膨胀。随着项目规模增长，特别是使用大型CSS框架(如Bootstrap、Tailwind CSS)时，大量未使用的样式会被打包到生产环境中，导致不必要的网络传输和加载延迟。

通过PurgeCSS，你可以：

将Tailwind CSS的默认体积从1.5MB减少到仅10KB
消除Bootstrap中90%以上的未使用样式
优化自定义CSS，确保生产环境只包含实际需要的代码

三、应用场景

PurgeCSS适用于以下场景：

使用CSS框架的项目：如Tailwind CSS、Bootstrap、Foundation等
组件化前端框架：React、Vue、Angular等
静态网站生成器：Gatsby、Next.js、Hugo等
传统Web应用：需要手动管理CSS的项目
性能敏感型应用：需要极致优化的网站和应用

四、如何安装和配置

安装

PurgeCSS可以通过npm或yarn安装：

npm install -D purgecss
# 或
yarn add -D purgecss

基本配置

创建一个配置文件purgecss.config.js：

const purgecss = require('purgecss');module.exports = {content: ['./src/**/*.html', './src/**/*.js', './src/**/*.vue'],css: ['./src/css/*.css'],safelist: {standard: ['active', 'open', 'hidden'],greedy: [/^animate-/],variants: ['hover', 'focus', 'active']}
};

集成到构建流程

1. 使用CLI

npx purgecss --config purgecss.config.js --out ./dist/css

2. 使用JavaScript API

const { PurgeCSS } = require('purgecss');async function purge() {const result = await new PurgeCSS().purge({content: ['./src/**/*.html', './src/**/*.js'],css: ['./src/css/style.css'],safelist: {standard: ['active', 'open'],greedy: [/^animate-/]}});console.log('优化前大小:', fs.statSync('./src/css/style.css').size);console.log('优化后大小:', result[0].css.length);
}purge();

3. 集成到Webpack

安装插件：

npm install -D purgecss-webpack-plugin glob-all

配置webpack.config.js：

const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const path = require('path');
const glob = require('glob-all');module.exports = {// 其他配置...plugins: [new PurgeCSSPlugin({paths: glob.sync([path.join(__dirname, 'src/**/*.html'),path.join(__dirname, 'src/**/*.js'),path.join(__dirname, 'src/**/*.vue')]),safelist: {standard: ['active', 'open'],greedy: [/^animate-/]}})]
};

4. 集成到Vite

import { defineConfig } from 'vite';
import { purgeCss } from 'vite-plugin-tailwind-purgecss';export default defineConfig({plugins: [purgeCss({content: ['./src/**/*.html', './src/**/*.js', './src/**/*.vue'],safelist: {standard: ['active', 'open'],greedy: [/^animate-/]}})]
});

5. 集成到PostCSS

// postcss.config.js
module.exports = {plugins: [require('tailwindcss'),require('autoprefixer'),process.env.NODE_ENV === 'production' &&require('@fullhuman/postcss-purgecss')({content: ['./src/**/*.html', './src/**/*.js', './src/**/*.vue'],defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []})]
};

五、示例代码

1. 简单HTML项目示例

假设我们有一个简单的HTML文件，使用了Bootstrap：

<!DOCTYPE html>
<html>
<head><link href="bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container"><h1 class="text-center">Hello World</h1><button class="btn btn-primary">Click Me</button></div>
</body>
</html>

使用PurgeCSS处理后，只会保留实际使用的样式（如.container、.text-center、.btn、.btn-primary等），而Bootstrap的其他数千个未使用类名将被删除。

2. Tailwind CSS示例

在Tailwind项目中，我们可能有以下配置：

// tailwind.config.js
module.exports = {content: ['./src/**/*.html', './src/**/*.js'],theme: {extend: {},},plugins: [],
}

我们的HTML可能是：

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">This is a Tailwind component
</div>

PurgeCSS会自动识别并保留这些类：bg-blue-500、text-white、p-4、rounded-lg、shadow-md，而删除所有其他未使用的Tailwind类。

3. 动态类名处理

对于JavaScript动态生成的类名，我们可以使用safelist或自定义提取器：

// 使用safelist保留动态类名
module.exports = {content: ['./src/**/*.html', './src/**/*.js'],safelist: {standard: ['active', 'open', 'hidden'],greedy: [/^bg-/, /^text-/, /^border-/] // 保留所有以这些前缀开头的类}
};