標籤：exports json lock 比較 github -- from 深度 圖片
本次課程的代碼目錄(如所示)：
>>> 本節課源碼
>>> 所有課程源碼
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 中建立了一個 <div> 標籤，並且將它的類設為 .box
// app.jsimport 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 樣式類。
<!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 樣式類。下面，就實現這個效果！
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中來。
為了方便最後檢查打包後的 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.jsconst 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]};命令列運行webpack打包後，樣式檔案被抽離到了 /dist/app.min.css 檔案中。檔案內容如所示（肯定好多朋友懶得手動打包）：
我們在index.html 和 src/app.js 中引用的樣式都被打包了，而沒有被使用的樣式類--box-small，就沒有出現在圖片中。成功！
終
歡迎入群：857989948 。IT 技術深度交流和分享，涉及方麵包括但不限於：網站製作、運營、UI 設計、演算法分析、大資料、人工智慧等。本群主打有深度、有態度的技術交流，歡迎熱衷記錄知識的您的加入。
webpack4 系列教程(八): CSS Tree Shaking
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
