移除未使用 CSS 工具 PurgeCSS 详解

WEB前端 CSS样式、Nodejs学习 2020年4月30日

PurgeCSS 是一个能够通过字符串串对比，来决定移除不不需要的 CSS 的工具。PurgeCSS 通过分析你的内容和 CSS 文件，首先它将 CSS 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 css 中删除未使用的选择器，从而生成更小的 CSS 文件。对于 PurgeCSS 的配置因项⽬目不不同⽽而异，它不不仅可以作为 webpack 的插件，还可以作为 postcss 的插件。下面雷雪松就详细得讲解一下移除未使用 CSS 工具 PurgeCSS。

1、配置⽅方式
（1）作为 webpack 的插件安装
安装
[cc lang=”bash” escaped=”true”]npm i purgecss-webpack-plugin -D[/cc]

webpack 配置
[cc lang=”javascript” escaped=”true”]const path = require(‘path’)
const glob = require(‘glob’)
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
const PurgecssPlugin = require(‘purgecss-webpack-plugin’)
const PATHS = {
src: path.join(__dirname, ‘src’)
}
module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘bundle.js’,
path: path.join(__dirname, ‘dist’)
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: ‘styles’,
test: /\.css$/,
chunks: ‘all’,
enforce: true
}
}
}
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader’
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: ‘[name].css’
}),
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
})
]
}[/cc]

（2）作为 postCss 的插件
安装
[cc lang=”bash” escaped=”true”]npm i -D @fullhuman/postcss-purgecss[/cc]

[cc lang=”javascript” escaped=”true”]const purgecss = require(‘@fullhuman/postcss-purgecss’)
postcss([
purgecss({
content: [‘./src/**/*.html’]
})
])[/cc]

（3）定义 purgecss.config.js 文件配合 Purgecss 插件使⽤
// purgecss.config.js
[cc lang=”javascript” escaped=”true”]const purgecss = require(‘@fullhuman/postcss-purgecss’)
postcss([
purgecss({
content: [‘./src/**/*.html’]
})
])
[/cc]

然后 PurgeCSS 就可以使用此配置文件
[cc lang=”javascript” escaped=”true”]const purgecss = new Purgecss()
const purgecss = new Purgecss(‘./purgecss.config.js’)[/cc]

2、配置项说明
content
告诉 PurgeCSS 去哪⾥里里查找将要对应匹配的 class。
css
告诉 PurgeCSS 去哪⾥里里查找将要对应匹配的 css ⽂文件。
defaultExtractor
PurgeCSS 可以根据你的需要进行调整。如果你注意到大量未被使用的 css 没有被删除，你可能需要使用自定义提取器了。提取器可以应用于具有某些扩展名的文件。如果你希望对所有类型的文件使用相同的提取器，请通过 defaultExtractor 参数指定提取器。
extractors
可以根据您的需求进⾏行行调整，⾃自定义提取器器。
keyframes (default: false)
可以通过将关键帧选项设置为 true 来删除未使⽤用的关键帧。
fontFace (default: false)
如果 css 中有任何未使⽤用的 @font-face 规则，您可以通过将 font-face 选项设置为 true 来删除。
variables (default: false)
如果您使用的是自定义属性（CSS 变量）或使用此项技术的库（例如 Bootstrap），则可以通过将 variables 参数设置为 true 来删除未使用的 CSS 变量。
rejected (default: false)
有时更更实际的做法是浏览被删除的列列表，看看是否有明显的错误。如果您想这样做，请使⽤用拒绝选
项。
whitelist
对于一些你不想要移除的 class 或者某些标签上对应的样式名称，你可以它们加到⽩白名单字段中。
你⾄至少需要添加 html 和 body 标签以及任意的动态 class 样式名称到⽩白名单配置字段中。
const purgecss = new Purgecss({
content: [], // content
css: [], // css
whitelist: [‘random’, ‘yep’, ‘button’] // 类名、ID、元素选择器器顺序
})
whitelistPatterns
⽩白名单模式，可以基于带有⽩白名单模式的正则表达式将选择器器列列⼊入⽩白名单。
whitelistPatternsChildren
您可以基于带有⽩白名单模式⼦子代的正则表达式将选择器器列列⼊入⽩白名单。与⽩白名单模式相反，它也会将选择器器的⼦子级列列⼊入⽩白名单。

来源：移除未使用 CSS 工具 PurgeCSS 详解