(十三)未使用のCSSの除去

このセクションの知識点

未使用CSS

を消去する.

概要

例えばbootstrapを使っているとき、彼は140 KBでしたが、実際にはそんなに必要ありません.このプラグインを使ったら35 KBに減りました.

インストール

は2つのパッケージを使用しました.1つはpurifycss-webpack、1つは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というプラグインを組み合わせる必要があります.エラーが表示されます