(十三) 消除未使用的CSS

本节知识点

• 消除未使用的CSS

概述

比如我们在使用bootstrap的时候，他140KB但是实际上我们不需要那么多，要是使用了这个插件就减少到了35KB

安装

• 用到了两个包 一个是purifycss-webpack 一个是purify-css

npm i purifycss-webpack  purify-css  -d

这里的-d就代表了 --save-dev

引入glob和包

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

const glob = require("glob");

• 接着在头部在引入purifycss-webpack

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

配置plugins

    //插件:用于生产模板和各项功能
    plugins:[
        new uglify(),
        new htmlPlugin({
            minify:{
                removeAttributeQuotes: true
            },
            hash: true,
            template:"./src/index.html"
        }),
        //把CSS独立出来，不要打包到js文件中去里面写的就是独立出来后的路径
        new extracTextPlugin("/css/index.css"),
        //引入插件检查
        new PurifyCSSPlugin({
            paths:glob.sync(path.join(__dirname,"src/*.html"))
        })
    ],

这里配置了路径主要是找到模板根据这个配置他会遍历你的文件。找到哪些CSS被占用了.

特别注意 使用这个插件必须要配合extract-text-webpack-plugin这个插件。否则会报错误