webpack 消除未使用的CSS

最新推荐文章于 2025-03-20 19:16:40 发布

oYuLian

最新推荐文章于 2025-03-20 19:16:40 发布

阅读量2.4k

点赞数

分类专栏： webpack

webpack 专栏收录该内容

4 篇文章

订阅专栏

学习如何使用PurifyCSS-webpack插件清除未使用的CSS，有效减少如Bootstrap等框架带来的冗余，提高项目性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第14节：CSS进阶：消除未使用的CSS

像Bootstrap这样的框架往往会带有很多CSS。在项目中通常我们只使用它的一小部分。就算我们自己写CSS，随着项目的进展，CSS也会越来越多，有时候需求更改，带来了DOM结构的更改，这时候我们可能无暇关注CSS样式，造成很多CSS的冗余。这节课就学习用webpack消除未使用的CSS。

PurifyCSS

使用PurifyCSS可以大大减少CSS冗余，比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。

安装PurifyCSS-webpack

从名字你就可以看出这是一个插件，而不是loader。所以这个需要安装还需要引入。 PurifyCSS-webpack要以来于purify-css这个包，所以这两个都需要安装。

1
npm i -D purifycss-webpack purify-css

这里的-D代表的是–save-dev ,只是一个简写。

引入glob

因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

1
const glob = require('glob');

引入purifycss-webpack

同样在webpack.config.js文件头部引入purifycss-webpack

1
const PurifyCSSPlugin = require("purifycss-webpack");

配置plugins

引入完成后我们需要在webpack.config.js里配置plugins。代码如下，重点看标黄部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
plugins:[
    //new uglify() 
    new htmlPlugin({
        minify:{
            removeAttrubuteQuotes:true
        },
        hash:true,
        template:'./src/index.html'
        
    }),
    new extractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
 
]