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

趙連江發布于2019-08-29 16:36 / 1593人閱讀

摘要：按照我們的仿真的環境，最終之后的效果應該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關插件后，我們需要在的配置中引用第三部分定義的代碼。

教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步原文地址

有空就來看看個人技術小站, 我一直都在

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 樣式類。




  
  
  
  
  Document

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

3. 認識下 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，就沒有出現在圖片中。成功！

終

歡迎入群：_857989948_ 。IT 技術深度交流和分享，涉及方面包括但不限于：網站制作、運營、UI 設計、算法分析、大數據、人工智能等。本群主打有深度、有態度的技術交流，歡迎熱衷記錄知識的您的加入。

GPU云服務器云服務器 tree-shaking webpack4教程 linux系列教程云服務器建站教程系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113856.html

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

摘要：按照我們的仿真的環境，最終之后的效果應該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關插件后，我們需要在的配置中引用第三部分定義的代碼。教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步原文地址有空就來看看個人技術小站, 我一直都在 0. 課程介紹和資料本次課程的代碼目錄(如下圖所示)：s...

superw 2019-08-23 11:40 評論0 收藏0
webpack-demos：全網最貼心webpack系列教程和配套代碼

摘要：全網最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程，一共分成節，每節都有講解，并且準備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網最貼心 webpack 系列教程和配套代碼歡迎關注個人技術博客：godbmw.com。每周 1 篇原創技術分享！開源教程(webpack、設計模式）、面試刷題（偏前...

LMou 2019-08-23 12:25 評論0 收藏0
webpack4 系列教程: 前言

摘要：課程地址全部課程地址立即進入課程源碼目錄截至按照知識點，目錄分成了個文件夾之后還會持續更新。個人網站原文鏈接系列教程前言本文檔已經過時，最近內容請看：https://godbmw.com/passage/76。一共16節課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發者可以輕松地實現加密代碼、多平臺兼容。而最重要的...

DevWiki 2019-08-23 10:25 評論0 收藏0
24 個實例入門并掌握「Webpack4」(二)

摘要：代碼如下所示按照正常使用習慣，操作來實現樣式的添加和卸載，是一貫技術手段。將幫助我們進行操作。繼 24 個實例入門并掌握「Webpack4」(一) 后續： JS Tree Shaking CSS Tree Shaking 圖片處理匯總字體文件處理處理第三方 js 庫開發模式與 webpack-dev-server 開發模式和生產模式?實戰打包自定義函數庫九、JS Tre...

hlcc 2019-08-26 18:26 評論0 收藏0
webpack4 的生產環境優化

摘要：的生產環境優化完整配置的可以參考本文主要介紹了生產環境我都做了哪些優化文章的結構如下靜態資源路徑。分配不同的關于穩定性的坑注意區分整個項目有變動時，變化。而生產環境可以這一項，因為我們不需要在生產環境調試代碼。 webpack4 的生產環境優化 webpack4完整配置的可以參考： https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產...

bang590 2019-08-23 10:34 評論0 收藏0