“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

introduce

Last time we talked about Tree shaking in WebPack. It’s a feature that comes built-in to WebPack, but you’d think that if js code can be wiped away, CSS code should have a way to wipe away style too.

This will take you to understand a dedicated to erase the unused CSS Webpack plug-in – purgecss – Webpack – the plugin, then, we will through a example to demonstrate the use of his method and effect.

To prepare

Let’s configure webPack briefly, because we want to see the packaging structure clearly, or we’ll install the Mini-CSS-extract-plugin, which pulls CSS into a file so it’s easy to see.

# NPM 
npm i -D mini-css-extract-plugin
# YARN
yarn add -D mini-css-extract-plugin
Copy the code
// 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,
}

Copy the code

Then build a simple project with the following directory structure:

Write a simple page like this:

We intentionally wrote three color boxes, and what we’re really using is red-box, and green-box and blue-box we haven’t used, but notice that we’re hoping to get rid of both of them.

Then, run the NPM Run build package to build and see what it looks like.

We found the removed CSS file under the packed folder. We can see that I have not used green-box and blue-box, but still packed them in. Next, we’ll wipe them out with purgecss-webpack-plugin.

use

We will install purgecss-webpack-plugin and glob, purgecss-webpack-plugin is our main role, and glob is to help us more easily match the file to meet the requirements.

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

Before webpack.config.js changes the following:

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

// Get the absolute folder path method
const getDirPath=function(dirName){
  return path.join(__dirname, dirName)
}

// Get the matching file
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,
}

Copy the code

Here we instantiate the PurgeCSSPlugin to pass in the relevant files, the purpose of which is to extract from these relevant files the style used by the useful element node, so we need not only CSS, but also HTML with related elements, as well as JS.

Then we pack again, open the file, and see that the green-box and blue-box that we didn’t use just disappeared, leaving only the red-box.

conclusion

This may sound easy, but it does reduce a lot of CSS volume and is a great way to optimize your code. If you have time to look at the source code, perhaps you can also make a similar and more useful plug-in to help you.