CSS清理大师：PurgeCSS入门到精通，带你解锁极致性能

最新推荐文章于 2025-12-01 00:14:59 发布

原创

最新推荐文章于 2025-12-01 00:14:59 发布 · 836 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

文章目录

CSS清理大师：PurgeCSS入门到精通，带你解锁极致性能

CSS清理大师：PurgeCSS入门到精通，带你解锁极致性能

1. PurgeCSS 基础概念

1.1 什么是 PurgeCSS？

PurgeCSS 是一个用于移除未使用 CSS 的工具，通过分析你的内容和 CSS 文件，删除未使用的样式。

1.2 为什么要使用 PurgeCSS？

大幅减小 CSS 文件体积
提高页面加载性能
清理冗余的 CSS 代码
特别适用于 Tailwind CSS、Bootstrap 等大型 CSS 框架

2. 安装与基础使用

2.1 安装

# 通过 npm 安装
npm install --save-dev purgecss

# 通过 yarn 安装
yarn add --dev purgecss

# 全局安装
npm install -g purgecss

2.2 基础命令行使用

# 基本用法
purgecss --css styles.css --content index.html --output dist/

# 多个文件和目录
purgecss --css styles.css --content "**/*.html" "**/*.js" --output dist/

2.3 基本配置文件

// purgecss.config.js
module.exports = {
   
   
  content: ['./src/**/*.html', './src/**/*.js', './src/**/*.vue'],
  css: ['./src/**/*.css'],
  output: './dist/css/',
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
};

3. 与构建工具集成

3.1 与 Webpack 集成

// webpack.config.js
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');

module.exports = {
   
   
  // ... 其他配置
  plugins: [
    new PurgeCSSPlugin({
   
   
      paths: glob.sync(`${
     
     path.join(__dirname, 'src')}/**/*`, {
   
    nodir: true }),
      safelist: {
   
   
        standard: ['html', 'body'],
        deep: [/red$/]
      }
    })
  ]
};

3.2 与 Gulp 集成

// gulpfile.js
const gulp = require('gulp');
const purgecss = require('gulp-purgecss');

gulp.task('purgecss', () => {
   
   
  return gulp.src('src/css/*.css')
    .pipe(purgecss({
   
   
      content: ['src/**/*.html', 'src/**/*.js']
    }))
    .pipe(gulp.dest('dist/css'));
});

3.3 与 PostCSS 集成

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
   
   
  plugins: [
    purgecss({
   
   
      content: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
};

4. 与前端框架集成

4.1 与 Vue.js 集成

// vue.config.js
const {
   
    defineConfig } = require('@vue/cli-service'

最低0.47元/天解锁文章