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

苏南大叔:webpack4系列教程,如何利用purgecss去除多余的css? - webpack-purgecss
webpack4系列教程,如何利用purgecss去除多余的css?(图4-1)

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

安装依赖项目

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

苏南大叔:webpack4系列教程,如何利用purgecss去除多余的css? - webpack-purgecss-plugin
webpack4系列教程,如何利用purgecss去除多余的css?(图4-2)

就安装这个purgecss-webpack-plugin就可以,苏南大叔并没有主动安装purifycsspurgecss,可能是被动安装了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',
        }),
        //...
    ],
}

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

苏南大叔:webpack4系列教程,如何利用purgecss去除多余的css? - webpack-purgecss-plugin-config
webpack4系列教程,如何利用purgecss去除多余的css?(图4-3)

运行结果

为了显示它的特别效果。苏南大叔动用了一个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>

苏南大叔:webpack4系列教程,如何利用purgecss去除多余的css? - webpack-purgecss-plugin-demo
webpack4系列教程,如何利用purgecss去除多余的css?(图4-4)

执行结果:
bootstrap.css原版 => 193kb。然后开启sourcemap关闭purgecss的话 => 483kb。开启sourcemappurgecss的话 => 4.78kb。关闭sourcemap开启purgecss的话 => 4.59kb。结论是:虽然减肥的效果并不精准,但是效果非常明显。推荐使用!

额外补充

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

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

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

相关链接

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css    webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: