這篇文章主要為大家展示了“webpack4 CSS Tree Shaking怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“webpack4 CSS Tree Shaking怎么用”這篇文章吧。
代碼目錄(如下圖所示)：
什么是tree-shaking
webpack 2 的到來帶來的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有類似的做法。
webpack 里的tree-shaking的到來不得不歸功于es6規范的模塊。為什么這么說，如今的前端模塊規范很多，比較出流行的比如commonJS , AMD , es6 ，我簡單的說一下commonJS和es6模塊的區別。
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.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 樣式類。
<!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>
按照我們的仿真的環境，最終 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，就沒有出現在圖片中。成功！
以上是“webpack4 CSS Tree Shaking怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
