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

superw 发布于2019-08-23 11:40 / 1891人阅读

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。

教程所示图片使用的是 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 设计、算法分析、大数据、人工智能等。本群主打有深度、有态度的技术交流，欢迎热衷记录知识的您的加入。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97296.html

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

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

赵连江 2019-08-29 16:36 评论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