CSS 也有 Tree Shaking？
是滴，随着 webpack 的興起，css 也可以進行 Tree Shaking： 以去除項目代碼中用不到的 CSS 樣式，僅保留被使用的樣式代碼。
通常來說，造成學習和了解難度的原因，無非是無法模拟較真的生産環境來進行演練 （比如：在 js、html 等檔案中使用 css 樣式）。
但是，本篇博文已經幫您準備好了。快來看看吧！
0. 課程介紹和資料
>>> 本節課源碼
>>> 所有課程源碼
本次課程的代碼目錄(如下圖所示)：
1. CSS 也有 Tree Shaking？
是滴，随着 webpack 的興起，css 也可以進行 Tree Shaking： 以去除項目代碼中用不到的 CSS 樣式，僅保留被使用的樣式代碼。
為了友善了解 Tree Shaking 概念，并且與 JS Tree Shaking 進行橫向比較，請檢視：webpack4 系列教程(八): JS Tree Shaking
2. 項目環境仿真
因為 CSS Tree Shaking 并不像 JS Tree Shaking 那樣友善了解，是以首先要先模拟一個真實的項目環境，來展現 CSS 的 Tree Shaking 的配置和效果。
我們首先編寫
/src/css/base.css
樣式檔案，在檔案中，我們編寫了 3 個樣式類。但在代碼中，我們隻會使用
.box
和
.box--big
這兩個類。代碼如下所示：
/* 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
中建立了一個
标簽，并且将它的類設為
.box
// 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
樣式類。
<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>Documenttitle>
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
PurifyCSS
沒錯，就是這貨幫助我們進行 CSS Tree Shaking 操作。為了能準确指明要進行 Tree Shaking 的 CSS 檔案，它還有好朋友
glob-all
（另一個第三方庫）。
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
這個插件。如果忘記了它的用法，請檢視：
- webpack4 系列教程(六): 處理 SCSS
- webpack4 系列教程(五): 處理 CSS
是以，我們的
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]
}; 複制
5. 結果分析
指令行運作
webpack
打包後，樣式檔案被抽離到了
/dist/app.min.css
檔案中。檔案内容如下圖所示（_肯定好多朋友懶得手動打包_）：
我們在
index.html
和
src/app.js
中引用的樣式都被打包了，而沒有被使用的樣式類–
box-small
，就沒有出現在圖檔中。成功！
終