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

0. 课程引见和材料

本次课程的代码目次(以下图所示):
《webpack4 系列教程(九): CSS Tree Shaking》

>>> 本节课源码

>>> 一切课程源码

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">
  <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 这个插件。假如忘记了它的用法,请检察:

所以,我们的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 文件中。文件内容以下图所示(_一定很多朋侪懒得手动打包_):

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

我们在index.htmlsrc/app.js 中援用的款式都被打包了,而没有被运用的款式类–box-small,就没有出现在图片中。胜利!

迎接入群:_857989948_ 。IT 手艺深度交换和分享,触及方面包含但不限于:网站制造、运营、UI 设想、算法剖析、大数据、人工智能等。本群主打有深度、有立场的手艺交换,迎接热中纪录学问的您的到场。

    原文作者:心谭
    原文地址: https://segmentfault.com/a/1190000016242463
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞