(14/24) css進階：（入門）去除冗餘的css

在平時的項目開發中，咱們會引入一些框架，好比：Bootstrap，可是在項目中一般咱們只使用它的一小部分，還有部分是冗餘的。更有甚有時候需求更改，帶來DOM結構的更改，這時候咱們可能無暇關注CSS樣式，會形成不少冗餘的CSS。咱們得想辦法消除冗餘的CSS,若是靠人工去剔除，吃力又容易出錯,所以，此節咱們來學習一下用webpack如何消除未使用的CSS。

PurifyCSS
使用PurifyCSS能夠大大減小CSS冗餘,消除框架中未使用的CSS,初步達到按需引入的效果。

1.如何在webpack中使用？

1.1 安裝

安裝PurifyCSS-webpack插件，PurifyCSS-webpack是依賴於purify-css這個包的，因此這兩個都須要安裝。這裏採用npm安裝（也可採用cnpm安裝）

npm i -D purifycss-webpack purify-css

-D:是–save-dev的一個簡寫。

1.2 引入

(1)由於咱們須要同步檢查html模板，因此咱們須要引入node的glob對象使用。在webpack.config.js文件頭部引入glob。

const glob = require('glob');

(2)引入purifycss-webpack
一樣在webpack.config.js文件頭部引入purifycss-webpack。

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

1.3 配置plugins

引入完成後咱們須要在webpack.config.js裏配置plugins。代碼以下

plugins:[
    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')),
        })
]

這裏配置了一個paths，主要是需找html模板，purifycss根據這個配置會遍歷你的文件，查找哪些css被使用了。

注意：使用這個插件必須配合extract-text-webpack-plugin這個插件且extract-text-webpack-plugin插件必須在purifycss-webpack以前引入，extract-text-webpack-plugin插件相關知識點前面已經說過了。

1.4 編寫css代碼

配置好上邊的代碼，咱們能夠故意在src/css/index.css文件裏寫一些用不到的屬性，好比：

#hello{
    background-color: #018eea;
    color: red;
    font-size: 32px;
    text-align: center;
}

1.5 打包

此處打包分爲兩種狀況：一是使用了插件配置後的打包，另外一個是未使用插件配置的打包（刪除或註釋plugins中的PurifyCSSPlugin配置）,主要是對比有無插件的打包狀況。
使用webpack命令進行打包

webpack

結果1-----無插件樣式都被打包了：

結果2:----有插件，多餘樣式沒有被打包：

此節只是對如何使用這個插件作了簡單的描述，更多其餘的一些相關配置要求，需逐步深刻。有什麼問題，歡迎留言！！