樣式處理——去除無用樣式

前提說明

去除無用樣式就是去除樣式中沒有用到的 CSS 樣式，這樣有助於代碼的優化，減少不必要樣式代碼的加載。

去除無用樣式需要用到的模塊：

• purify-css
• purifycss-webpack
• glob，這個是一個輔助模塊，用來獲取 paths 的

准備工作

首先，還是把需要的依賴安裝一下 package.json：

  "scripts": {
    "webpack": "webpack"
  },
  "devDependencies": {
    "css-loader": "^1.0.0",
    "glob": "^7.1.3",
    "mini-css-extract-plugin": "^0.4.2",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  }

其次，就是准備 Webpack 的配置文件 webpack.config.js，當然，這個配置文件是一部分：

const { join, relative } = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {};

config.mode = 'production';
config.entry = {
  index: join(__dirname, './src/index.js')
};
config.output = {
  path: join(__dirname, './dist'),
  filename: '[name].bundle.js',
  chunkFilename: '[name].chunk.js',
  publicPath: join(__dirname, './dist/')
};

config.module = {
  rules: []
};

config.module.rules.push({
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader
    },
    {
      loader: 'css-loader'
    }
  ]
});

config.plugins = [];

config.plugins.push(new MiniCssExtractPlugin({
  filename: "[name].css"
}));

module.exports = config;

最后，就是准備一下需要的代碼文件：

index.js：

import './css/common.css';

function createDiv() {
  var element = document.createElement('div');
  element.className = 'my-div';
  element.innerHTML = '這是一個div';
  return element;
}

document.body.appendChild(createDiv());

css/common.css：

* {
  margin: 0;
  padding: 0;
}

.my-div {
  width: 100%;
  height: 120px;
  background-color: aqua;
}

span {
  font-size: 16px;
}

增加相關配置

其中 glob 模塊是用來讀取文件的。

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

config.plugins.push(new PurifyCSSPlugin({
  paths: glob.sync(join(__dirname, './src/**/*.js'))
}));

最后執行命令 yarn webpack，在 dist 目錄下就會生成一個 index.css 文件。

* {
  margin: 0;
  padding: 0;
}

.my-div {
  width: 100%;
  height: 120px;
  background-color: aqua;
}

會發現樣式中沒有了 span 的樣式，因為這個樣式沒有被用到。