webpack4系列教程，如何利用purgecss去除多余的css？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在写页面的过程中，由于需求的变化，经常会有反复修改页面的过程。然后，就会出现大量的代码冗余，比如css文件，很多代码是多余的。但是，又不敢删除这些多余的css代码。因为不晓得，到底哪个是用的到，哪个是用不到的。

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、purgecss@2.2.1、purgecss-webpack-plugin@2.2.0。另外，苏南大叔认为：本文中的讲述的purgecss就是个工具，并不能百分百的确保理解你的意思。所以，请不要寄希望于它能够百分百完美解决你的问题，这个是不现实的。

安装依赖项目

purgecss-webpack-plugin这个项目多次修改名称及项目地址。目前最新的地址是：

• https://github.com/FullHuman/purgecss/tree/master/packages/purgecss-webpack-plugin
• https://www.purgecss.com/

就安装这个purgecss-webpack-plugin就可以，苏南大叔并没有主动安装purifycss和purgecss，可能是被动安装了purgecss。安装命令是：

npm i purgecss-webpack-plugin -D

其次，它还和mini-css-extract-plugin是好伙伴关系，purgecss-webpack-plugin的正常使用需要安装mini-css-extract-plugin。
具体请参考：

• https://newsn.net/say/webpack-css.html

npm i mini-css-extract-plugin -D

最后，它还需要glob（一般自带，不用安装），或者glob-all（推荐使用）。

npm i glob-all -D

基本配置

下面修改配置文件webpack.config.js:

const path = require('path')
// const glob = require('glob')
const glob = require('glob-all')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')
module.exports = {
    mode: 'production', // 环境
    plugins: [
        new PurgecssPlugin({
            paths: glob.sync([
                path.join(__dirname, './html/*.html'),
                path.join(__dirname, './src/*.js'),
                path.join(__dirname, './src/*.ts'),
            ],{
                nodir: true
            })
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash:8].css',
        }),
        //...
    ],
}

在这个配置中，需要指定Purgecss的paths，这里也就是苏南大叔说要使用glob-all的原因，这个glob-all可以设置多条路径，更加方便一些。这些路径是用来制定，css使用的位置途径的。也就是说css删减的标准。

运行结果

为了显示它的特别效果。苏南大叔动用了一个bootstrap框架，来看看它的css清理效果。就使用一个小组件，目标就是仅仅保留这个小组件的css存在，以最终达到瘦身的目的。代码如下：
npm安装bootstrap:

npm i bootstrap -D

./src/main.js引入bootstrap.css:

import 'bootstrap/dist/css/bootstrap.css';

./html/index.html模版，引入个按钮用例：

<button type="button" class="btn btn-lg btn-success">Success</button>

执行结果对比：

结论是：虽然减肥的效果并不精准，但是效果非常明显。推荐使用！

额外补充

从苏南大叔的运行结果上面来看，减肥的效果并不是特别精准。比如：

• .test和#test，在Purgecss看来，是一个东西。
• <!---->注释掉的代码，也会被识别出来。

另外，官方还有白名单whitelist和whitelistPatternsChildren的概念，估计就是用来弥补被误判的情况。大家可以自行查看官方范例。这里，苏南大叔就暂时不深入探讨了。

• https://github.com/FullHuman/purgecss/tree/master/packages/purgecss-webpack-plugin

相关链接

• https://github.com/FullHuman/purgecss/
• https://newsn.net/say/webpack-css.html

总结

其实，这个purgecss-webpack-plugin并没有对空白字符进行压缩。所以，这里还是有个可以进一步压缩的空间。请听苏南大叔的下一步分解。

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。