自动移除 Bootstrap 或其他框架中未使用的 CSS
我非常喜欢 Bootstrap（以及其他 CSS 框架）。对于像我这样经常在没有设计支持的情况下开发 Web 项目的开发者来说，它简直是救星。问题在于，由于 Bootstrap 是一个功能非常全面的框架（虽然你可以通过 Sass 进行选择），CSS 文件的大小很容易失控。Bootstrap.min.css 就有 138 KB。如果再添加主题和自定义 CSS，很容易就会超过 200 KB。
PurgeCSS是一个 Node.js 包，可以检测并移除未使用的 CSS 选择器。它会分析你的页面（无论是 HTML 还是模板引擎），并生成一个正在使用的 CSS 选择器列表。然后，PurgeCSS 会检查你的样式表，并移除视图中不存在的任何选择器。
我使用webpack 插件配置了 PurgeCSS ，该插件与 extract-text-webpack-plugin 插件配合使用。我的 webpack 配置基于我之前写过的Simple webpack 配置。
webpack 配置已经设置好，可以处理 Sass 并将 CSS 合并到一个文件中。我添加了 PurgecssPlugin 插件，它会在初始 CSS 处理完成后运行。
npm i -D purgecss-webpack-plugin
npm i -D extract-text-webpack-plugin
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const outputDir = './wwwroot/dist'
const entry = './wwwroot/js/app.js'
const cssOutput = 'site.css'
module.exports = (env) => {
return [{
entry: entry,
output: {
path: path.join(__dirname, outputDir),
filename: '[name].js',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader'],
fallback: 'style-loader'
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader'],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin(cssOutput),
new PurgecssPlugin({
paths: glob.sync('./Views/**/*.cshtml', { nodir: true }),
whitelistPatterns: [/selectize-.*/]
})
]
}]
}
该插件接受一个路径数组，用于查找正在使用的 CSS 选择器对应的视图文件。glob 包接受一个搜索模式，并生成一个文件列表。我正在我的 .NET Web 应用程序中查找 .cshtml 视图文件。
paths: glob.sync('./Views/**/*.cshtml', { nodir: true })
whitelistPatterns 参数允许您从清除操作中排除路径中可能不存在的选择器。我发现我使用的selectize 插件有一些动态添加的 CSS 类，这些类会被移除，所以我添加了一个模式来匹配这些 CSS 类的前缀。或者，我也可以使用 paths 参数包含此插件的 .js 文件。
whitelistPatterns: [/selectize-.*/]
在我的一个（不得不承认，体积庞大的）基于 Bootstrap 的网站上运行 PurgeCSS 后，CSS 文件大小从 159KB 减少到 60KB，而我基本上没有做任何努力！
