webpack4 系列教程(九): CSS Tree Shaking

時間 2019-11-10

標籤 webpack4 webpack 系列教程 css tree shaking 欄目 CSS 简体版

原文原文鏈接

教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步原文地址
有空就來看看我的技術小站, 我一直都在

0. 課程介紹和資料

本次課程的代碼目錄(以下圖所示)：
javascript

>>> 本節課源碼css

>>> 全部課程源碼html

1. CSS 也有 Tree Shaking？

是滴，隨着 webpack 的興起，css 也能夠進行 Tree Shaking：以去除項目代碼中用不到的 CSS 樣式，僅保留被使用的樣式代碼。

爲了方便理解 Tree Shaking 概念，而且與 JS Tree Shaking 進行橫向比較，請查看：webpack4 系列教程(八): JS Tree Shakingjava

2. 項目環境仿真

由於 CSS Tree Shaking 並不像 JS Tree Shaking 那樣方便理解，因此首先要先模擬一個真實的項目環境，來體現 CSS 的 Tree Shaking 的配置和效果。webpack

咱們首先編寫 /src/css/base.css 樣式文件，在文件中，咱們編寫了 3 個樣式類。但在代碼中，咱們只會使用 .box 和 .box--big 這兩個類。代碼以下所示：git

/* base.css */
html {
  background: red;
}

.box {
  height: 200px;
  width: 200px;
  border-radius: 3px;
  background: green;
}

.box--big {
  height: 300px;
  width: 300px;
  border-radius: 5px;
  background: red;
}

.box-small {
  height: 100px;
  width: 100px;
  border-radius: 2px;
  background: yellow;
}

按照正常使用習慣，DOM 操做來實現樣式的添加和卸載，是一向技術手段。因此，入口文件 /src/app.js 中建立了一個 <div> 標籤，而且將它的類設爲 .boxgithub

// app.js

import base from "./css/base.css";

var app = document.getElementById("app");
var div = document.createElement("div");
div.className = "box";
app.appendChild(div);

最後，爲了讓環境更接近實際環境，咱們在index.html的一個標籤，也引用了定義好的 box-big 樣式類。web

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./dist/app.min.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div class="box-big"></div>
  </div>
  <script src="./dist/app.bundle.js"></script>
</body>
</html>

按照咱們的仿真的環境，最終 Tree Shaking 以後的效果應該是：打包後的 css 文件不含有 box-small 樣式類。下面，就實現這個效果！算法

3. 認識下 `PurifyCSS`

沒錯，就是這貨幫助咱們進行 CSS Tree Shaking 操做。爲了能準確指明要進行 Tree Shaking 的 CSS 文件，它還有好朋友 glob-all （另外一個第三方庫）。json

glob-all 的做用就是幫助 PurifyCSS 進行路徑處理，定位要作 Tree Shaking 的路徑文件。

它們倆搭配起來，畫風以下：

const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");

let purifyCSS = new PurifyCSS({
  paths: glob.sync([
    // 要作CSS Tree Shaking的路徑文件
    path.resolve(__dirname, "./*.html"),
    path.resolve(__dirname, "./src/*.js")
  ])
});

好了，這只是一個小小的 demo。下面咱們要把它用到咱們的webpack.config.js中來。

4. 編寫配置文件

爲了方便最後檢查打包後的 css 文件，配置中還使用了 extract-text-webpack-plugin 這個插件。若是忘記了它的用法，請查看：

因此，咱們的package.json文件以下：

{
  "devDependencies": {
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "glob-all": "^3.1.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.0"
  }
}

安裝完相關插件後，咱們須要在 webpack 的plugins配置中引用第三部分定義的代碼。

而後結合extract-text-webpack-plugin的配置，編寫以下webpack.config.js:

// webpack.config.js
const path = require("path");
const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let extractTextPlugin = new ExtractTextPlugin({
  filename: "[name].min.css",
  allChunks: false
});

let purifyCSS = new PurifyCSS({
  paths: glob.sync([
    // 要作CSS Tree Shaking的路徑文件
    path.resolve(__dirname, "./*.html"), // 請注意，咱們一樣須要對 html 文件進行 tree shaking
    path.resolve(__dirname, "./src/*.js")
  ])
});

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: "style-loader",
            options: {
              singleton: true
            }
          },
          use: {
            loader: "css-loader",
            options: {
              minimize: true
            }
          }
        })
      }
    ]
  },
  plugins: [extractTextPlugin, purifyCSS]
};