CSS TreeShking 原理揭秘：手写 PurgeCss

发表于 2年以前 | 总阅读数：356 次

TreeShking 是通过静态分析的方式找出源码中不会被使用的代码进行删除，达到减小编译打包产物的代码体积的目的。

JS 我们会用 Webpack、Terser 进行 Tree Shking，而 CSS 会用 PurgeCss。

PurgeCss 会分析 html 或其他代码中 css 选择器的使用情况，进而删除没有被使用的 css。

是否对 PurgeCss 怎么找到无用的 css 的原理比较好奇呢？今天我们就来手写个简易版 PurgeCss 来探究下吧。

思路分析

PurgeCss 要指定 css 应用到哪些 html，它会分析 html 中的 css 选择器，根据分析结果来删除没有用到的 css：

const { PurgeCSS } = require('purgecss')
const purgeCSSResult = await new PurgeCSS().purge({
  content: ['**/*.html'],
  css: ['**/*.css']
})

我们要做的事情就可以分为两部分：

提取 html 中的可能的 css 选择器，包括 id、class、tag 等
分析 css 中的 rule，根据选择器是否被 html 使用，删掉没被用到的部分

从 html 中提取信息的部分，叫做 html 提取器（extractor）。

我们可以基于 posthtml 来实现 html 的提取器，它可以做 html 的 parse、分析、转换等，api 和 postcss 类似。

css 的部分使用 postcss，通过 ast 可以分析出每一条 rule。

遍历 css 的 rule，对每个 rule 的选择器都判断下是否在从 html 中提取到选择器中，如果没有，就代表没有被使用，就删掉该选择器。

如果一个 rule 的所有的选择器都删掉了，那么就把这个 rule 删掉。

这就是 purgecss 的实现思路。我们来写下代码。

代码实现

我们来写一个 postcss 插件来做这件事情，postcss 插件就是基于 AST 做 css 的分析和转换的。

const purgePlugin = (options) => {

    return {
        postcssPlugin: 'postcss-purge',
        Rule (rule) {}
    }
}

module.exports = purgePlugin;

postcss 插件的形式是一个函数，接收插件的配置参数，返回一个对象。对象里声明 Rule、AtRule、Decl 等的 listener，也就是对不同 AST 的处理函数。

这个 postcss 插件的名字叫做 purge，可以被这样调用：

const postcss = require('postcss');
const purge = require('./src/index');
const fs = require('fs');
const path = require('path');
const css = fs.readFileSync('./example/index.css');

postcss([purge({
    html: path.resolve('./example/index.html'),
})]).process(css).then(result => {
    console.log(result.css);
});

通过参数传入 html 的路径，插件里可以通过 option.html 拿到。

接下来我们来实现下这个插件。

前面分析过，实现过程整体分为两步：

通过 posthtml 提取 html 中的 id、class、tag
遍历 css 的 ast，删掉没被 html 使用的部分

我们封装一个 htmlExtractor 来做提取的事情：

const purgePlugin = (options) => {
    const extractInfo = {
        id: [],
        class: [],
        tag: []
    };

    htmlExtractor(options && options.html, extractInfo);

    return {
        postcssPlugin: 'postcss-purge',
        Rule (rule) {}
    }
}

module.exports = purgePlugin;

htmlExtractor 的具体实现就是读取 html 的内容，对 html 做 parse 生成 AST，遍历 AST，记录 id、class、tag：

function htmlExtractor(html, extractInfo) {
    const content = fs.readFileSync(html, 'utf-8');

    const extractPlugin = options => tree => {      
        return tree.walk(node => {
            extractInfo.tag.push(node.tag);
            if (node.attrs) {
              extractInfo.id.push(node.attrs.id)
              extractInfo.class.push(node.attrs.class)
            }
            return node
        });
    }

    posthtml([extractPlugin()]).process(content);

    // 过滤掉空值
    extractInfo.id = extractInfo.id.filter(Boolean);
    extractInfo.class = extractInfo.class.filter(Boolean);
    extractInfo.tag = extractInfo.tag.filter(Boolean);
}

posthtml 的插件形式和 postcss 类似，我们在 posthtml 插件里遍历 AST 并记录了一些信息。

最后，过滤掉 id、class、tag 中的空值，就完成了提取。

我们先不着急做下一步，先来测试下现在的功能。

我们准备这样一个 html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="aaa"></div>

    <div id="ccc"></div>

    <span></span>
</body>
</html>

测试下提取的信息：

可以看到，id、class、tag 都正确的从 html 中提取了出来。

接下来，我们继续做下一步：从 css 的 AST 中删掉没被使用的部分。

我们声明了 Rule 的 listener，可以拿到 rule 的 AST。要分析的是 selector 部分，需要先根据 “,” 做拆分，然后对每一个选择器做处理。

Rule (rule) {                        
     const newSelector = rule.selector.split(',').map(item => {
        // 对每个选择器做转换
    }).filter(Boolean).join(',');

    if(newSelector === '') {
        rule.remove();
    } else {
        rule.selector = newSelector;
    }
}

选择器可以用 postcss-selector-parser 来做 parse、分析和转换。

处理以后的选择器如果都被删掉了，就说明这个 rule 的样式就没用了，就删掉这个 rule。否则可能只是删掉了部分选择器，该样式还会被用到。

const newSelector = rule.selector.split(',').map(item => {
    const transformed = selectorParser(transformSelector).processSync(item);
    return transformed !== item ? '' : item;
}).filter(Boolean).join(',');

if(newSelector === '') {
    rule.remove();
} else {
    rule.selector = newSelector;
}

接下来实现对选择器的分析和转换，也就是 transformSelector 函数。

这部分的逻辑就是对每个选择器判断下是否在从 html 提取到的选择器中，如果不在，就删掉。

const transformSelector = selectors => {
    selectors.walk(selector => {
        selector.nodes && selector.nodes.forEach(selectorNode => {
            let shouldRemove = false;
            switch(selectorNode.type) {
                case 'tag':
                    if (extractInfo.tag.indexOf(selectorNode.value) == -1) {
                        shouldRemove = true;
                    }
                    break;
                case 'class':
                    if (extractInfo.class.indexOf(selectorNode.value) == -1) {
                        shouldRemove = true;
                    }
                    break;
                case 'id':
                    if (extractInfo.id.indexOf(selectorNode.value) == -1) {
                        shouldRemove = true;
                    }
                    break;
            }

            if(shouldRemove) {
                selectorNode.remove();
            }
        });
    });
};

我们完成了 html 中选择器信息的提取，和 css 根据 html 提取的信息做无用 rule 的删除，插件的功能就已经完成了。

我们来测试下效果：

css：

.aaa, ee , ff{
    color: red;
    font-size: 12px;
}
.bbb {
    color: red;
    font-size: 12px;
}

#ccc {
    color: red;
    font-size: 12px;
}

#ddd {
    color: red;
    font-size: 12px;
}

p {
    color: red;
    font-size: 12px;
}
span {
    color: red;
    font-size: 12px;
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="aaa"></div>

    <div id="ccc"></div>

    <span></span>
</body>
</html>

按理说， p、#ddd、.bbb 的选择器和样式，ee、ff 的选择器都会被删除。

我们使用下该插件：

const postcss = require('postcss');
const purge = require('./src/index');
const fs = require('fs');
const path = require('path');
const css = fs.readFileSync('./example/index.css');

postcss([purge({
    html: path.resolve('./example/index.html'),
})]).process(css).then(result => {
    console.log(result.css);
});

经测试，功能是对的：

这就是 PurgeCss 的实现原理。我们完成了 css 的 three shaking！

代码上传到了 github：https://github.com/QuarkGluonPlasma/postcss-plugin-exercize

当然，我们只是简易版实现，有的地方做的不完善：

只实现了 html 提取器，而 PurgeCss 还有 jsx、pug、tsx 等提取器（不过思路都是一样的）
只处理了单文件，没有处理多文件（再加个循环就行）
只处理了 id、class、tag 选择器，没处理属性选择器（属性选择器的处理稍微复杂一些）

虽然没有做到很完善，但是 PurgeCss 的实现思路已经通了，不是么～

总结

JS 的 TreeShking 使用 Webpack、Terser，而 CSS 的 TreeShking 使用 PurgeCss。

我们实现了一个简易版的 PurgeCss 来理清了它的实现原理：

通过 html 提取器提取 html 中的选择器信息，然后对 CSS 的 AST 做过滤，根据 Rule 的 selector 是否被使用到来删掉没用到的 rule，达到 TreeShking 的目的。

实现这个工具的过程中，我们学习了 postcss 和 posthtml 插件的写法，这两者形式上很类似，只不过一个针对 css 做分析和转换，一个针对 html。

Postcss 可以分析和转换 CSS，比如这里的删除无用 css 就是一个很好的应用。你还见过别的 postcss 的很棒的应用场景么，不妨一起来讨论下吧～

本文由哈喽比特于2年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/3-nxykPmocpL57kNy33BHg

刘强东夫妇：“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。

发布于：1年以前 | 808次阅读 | 详细内容 »

博主曝三大运营商，将集体采购百万台华为Mate60系列

日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于：1年以前 | 770次阅读 | 详细内容 »

ASML CEO警告：出口管制不是可行做法，不要“逼迫中国大陆创新”

据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于：1年以前 | 756次阅读 | 详细内容 »

抖音中长视频App青桃更名抖音精选，字节再发力对抗B站

今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。

发布于：1年以前 | 648次阅读 | 详细内容 »

威马CDO：中国每百户家庭仅17户有车

日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。

发布于：1年以前 | 589次阅读 | 详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。

发布于：1年以前 | 449次阅读 | 详细内容 »

苹果据称正引入3D打印技术，用以生产智能手表的钢质底盘

据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。

发布于：1年以前 | 446次阅读 | 详细内容 »

千万级抖音网红秀才账号被封禁

9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...

发布于：1年以前 | 445次阅读 | 详细内容 »