聊聊webpack如何擦除未使用的css

介绍

本期就带大家了解一款专门用于擦除未使用的css的Webpack插件——purgecss-webpack-plugin，接下来，我们会通过一个实例来演示他的使用方法和效果。

准备

我们先简单配置一下webpack，因为我们想清晰的看到打包结构，不然我们先把安装一下mini-css-extract-plugin，它把css抽离到一个文件里面去，这样容易观察。

# NPM 
npm i -D mini-css-extract-plugin
# YARN
yarn add -D mini-css-extract-plugin

// webpack.config.js
// ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const plugins = [
  // ...
]

plugins.push(new MiniCssExtractPlugin({
  filename: "./css/[name].[chunkhash:8].css"
}))

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins,
}

然后构建一个简单的项目，目录结构如下：

其实就是写一个简单页面，如下：

我们故意写了三种颜色盒子，而我们真正使用的就是.red-box，至于green-box和blue-box我们没有使用过，这里要注意，后面我们期望也是想擦除掉他们俩。

然后，执行npm run build打包构建一下，看看现在是什么样的吧。

我们在打包后的文件夹下找的抽离处理后的css文件，可以看到我green-box和blue-box这俩未使用，依然打包了进来。接下来，我们就要用purgecss-webpack-plugin擦除掉他们。

使用

我们先来安装下purgecss-webpack-plugin和glob，purgecss-webpack-plugin是我们的主角，而glob是可以帮助我们更轻松的匹配到符合需求的文件。

# NPM 
npm i -D purgecss-webpack-plugin glob
# YARN
yarn add -D purgecss-webpack-plugin glob

再之前webpack.config.js改造以下：

// webpack.config.js
// ...
const path = require("path");
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
const glob = require("glob")
const plugins = [
    // ...
]

// 获取文件夹绝对路径方法
const getDirPath=function(dirName){
  return path.join(__dirname, dirName)
}

// 获取匹配文件
const purgeFiles = glob.sync(`${getDirPath("src")}/**/*`, { nodir: true })
purgeFiles.push(path.resolve(__dirname, "public/index.html"))

plugins.push(new PurgeCSSPlugin({
  paths: purgeFiles,
}))

module.exports = {
  // ...
  plugins,
}

这里我们实例化的PurgeCSSPlugin要传入相关的文件，目的是从这些相关文件中得出有用的元素节点用到的样式，进行保留和清除，所以不仅仅需要的是css，也需要有相关元素的html，还有js。

然后我们再进行一次打包，然后打开文件就会发现，刚刚没有使用到的green-box和blue-box就消失了，只留下了red-box。

结语

是不是感觉非常的容易，但是这个方法的的确确可以减少很多css体积，对代码的优化也是大有裨益的手段。如果大家有时间也可以看看源码，或许你也可以自己制造一款类似且更好用的插件辅助你。