快捷導(dǎo)航

webpack4 CSS Tree Shaking的使用

更新時(shí)間：2018年09月03日 09:30:52 作者：董沅鑫

這篇文章主要介紹了webpack4 CSS Tree Shaking的使用,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

什么是tree-shaking

webpack 2 的到來(lái)帶來(lái)的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有類(lèi)似的做法。

webpack 里的tree-shaking的到來(lái)不得不歸功于es6規(guī)范的模塊。為什么這么說(shuō)，如今的前端模塊規(guī)范很多，比較出流行的比如commonJS , AMD , es6 ，我簡(jiǎn)單的說(shuō)一下commonJS和es6模塊的區(qū)別。

1. CSS 也有 Tree Shaking？

是滴，隨著 webpack 的興起，css 也可以進(jìn)行 Tree Shaking：以去除項(xiàng)目代碼中用不到的 CSS 樣式，僅保留被使用的樣式代碼。

為了方便理解 Tree Shaking 概念，并且與 JS Tree Shaking 進(jìn)行橫向比較，請(qǐng)查看：webpack4 系列教程(八): JS Tree Shaking

2. 項(xiàng)目環(huán)境仿真

因?yàn)?CSS Tree Shaking 并不像 JS Tree Shaking 那樣方便理解，所以首先要先模擬一個(gè)真實(shí)的項(xiàng)目環(huán)境，來(lái)體現(xiàn) CSS 的 Tree Shaking 的配置和效果。

我們首先編寫(xiě) /src/css/base.css 樣式文件，在文件中，我們編寫(xiě)了 3 個(gè)樣式類(lèi)。但在代碼中，我們只會(huì)使用 .box 和 .box--big 這兩個(gè)類(lèi)。代碼如下所示：

/* 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;
}

按照正常使用習(xí)慣，DOM 操作來(lái)實(shí)現(xiàn)樣式的添加和卸載，是一貫技術(shù)手段。所以，入口文件 /src/app.js 中創(chuàng)建了一個(gè) <div> 標(biāo)簽，并且將它的類(lèi)設(shè)為 .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);

最后，為了讓環(huán)境更接近實(shí)際環(huán)境，我們?cè)趇ndex.html的一個(gè)標(biāo)簽，也引用了定義好的 box-big 樣式類(lèi)。

<!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" rel="external nofollow" >
 <title>Document</title>
</head>
<body>
 <div id="app">
 <div class="box-big"></div>
 </div>
 <script src="./dist/app.bundle.js"></script>
</body>
</html>

按照我們的仿真的環(huán)境，最終 Tree Shaking 之后的效果應(yīng)該是：打包后的 css 文件不含有 box-small 樣式類(lèi)。下面，就實(shí)現(xiàn)這個(gè)效果！

3. 認(rèn)識(shí)下 PurifyCSS

沒(méi)錯(cuò)，就是這貨幫助我們進(jìn)行 CSS Tree Shaking 操作。為了能準(zhǔn)確指明要進(jìn)行 Tree Shaking 的 CSS 文件，它還有好朋友 glob-all （另一個(gè)第三方庫(kù)）。

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

它們倆搭配起來(lái)，畫(huà)風(fēng)如下：

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")
 ])
});

好了，這只是一個(gè)小小的 demo。下面我們要把它用到我們的webpack.config.js中來(lái)。

4. 編寫(xiě)配置文件

為了方便最后檢查打包后的 css 文件，配置中還使用了 extract-text-webpack-plugin 這個(gè)插件。如果忘記了它的用法，請(qǐng)查看：

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"
 }
}

安裝完相關(guān)插件后，我們需要在 webpack 的plugins配置中引用第三部分定義的代碼。

然后結(jié)合extract-text-webpack-plugin的配置，編寫(xiě)如下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"), // 請(qǐng)注意，我們同樣需要對(duì) html 文件進(jìn)行 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. 結(jié)果分析

命令行運(yùn)行webpack打包后，樣式文件被抽離到了 /dist/app.min.css 文件中。文件內(nèi)容如下圖所示（肯定好多朋友懶得手動(dòng)打包）：