前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >九:CSS-Tree-Shaking

九:CSS-Tree-Shaking

作者头像
心谭博客
发布2020-04-20 15:55:03
1.1K0
发布2020-04-20 15:55:03
举报
文章被收录于专栏:YuanXin

CSS 也有 Tree Shaking?

是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码。

通常来说,造成学习和理解难度的原因,无非是无法模拟较真的生产环境来进行演练 (比如:在 js、html 等文件中使用 css 样式)。

但是,本篇博文已经帮您准备好了。快来看看吧!

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 这两个类。代码如下所示:

代码语言:javascript
复制
/* 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

代码语言:javascript
复制
// 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 样式类。

代码语言:javascript
复制
<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>Documenttitle>
    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 的路径文件。

它们俩搭配起来,画风如下:

代码语言:javascript
复制
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文件如下:

代码语言:javascript
复制
{
    "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:

代码语言:javascript
复制
// 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.htmlsrc/app.js 中引用的样式都被打包了,而没有被使用的样式类–box-small,就没有出现在图片中。成功!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-09-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 0. 课程介绍和资料
  • 1. CSS 也有 Tree Shaking?
  • 2. 项目环境仿真
  • 3. 认识下 PurifyCSS
  • 4. 编写配置文件
  • 5. 结果分析
相关产品与服务
Web 应用防火墙
腾讯云 Web 应用防火墙(Web Application Firewall,WAF)帮助腾讯云内及云外用户应对 Web 攻击、入侵、漏洞利用、挂马、篡改、后门、爬虫等网站及 Web 业务安全防护问题。企业通过部署腾讯云 WAF 服务,将 Web 攻击威胁压力转移到腾讯云 WAF 防护集群节点,分钟级获取腾讯 Web 业务防护能力,为网站及 Web 业务安全运营保驾护航。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档