Treeshking是为了找到源代码中未使用的代码通过静态分析方法删除，以实现减少代码卷以编译和包装产品的代码。
JS我们将使用WebPack和Terser使用Treeshking，CSS将使用purgecss。
Purgecss分析在HTML或其他代码中使用CSS选择器的使用，然后删除未使用的CSS。
对珀奇斯（Purgecss）如何找到无用的CSS原理（今天），让我们编写一个简单的purgecss来探索它，这更加好奇。
Purgecss想要指定指定哪些HTML应用程序。它将根据分析结果分析HTML中的CSS选择器并删除未使用的CSS：
我们要做的可以分为两个部分：
来自HTML的信息的一部分称为提取器。
我们可以基于poSthtml实现HTML外推。它可以对HTML进行解析，分析，转换等。API和PostCS相似。
CSS部分使用PostCSS分析通过AST运行的每个运行。
遍历CSS的规则，确定每个运行的选择是否是从HTML提取到选择器的。如果没有，则意味着如果不使用它，则将选择器删除。
如果删除了运行的所有选择器，则将删除规则。
这是purgecss.let的实现，请写下代码。
让我们写一个Postcss插头 - 这样做。PostCSS插件基于CSS作为AST的分析和转换。
PostCSS插件的形式是接收插件的配置参数并返回对象的函数。声明规则，aTrule，dect等的listener是不同ast的处理函数。
此Postcss插件的名称称为“清除”，可以这样称呼：
HTML的路径通过参数传递，可以通过option.html获得插头-in。
接下来，我们将实现此插头。
在分析之前，将实施过程分为整个步骤：
我们封装了HTMLEXTRACTOR以进行提取：
HTMLEXTRACTOR的特定实现是读取HTML的内容。do parse生成HTML，Traverse AST，记录ID，类，标签的AST：
postml的插头形式与PostCSS相似。我们在Postthtml插头中前往AST，并记录了一些信息。
最后，ID，类和标签中的空值已完成，并完成了提取。
让我们不要急于执行下一步，首先测试当前功能。
我们正在准备这样的HTML：
在测试下提取的信息：
可以看出，从HTML正确提取ID，类和标签。
接下来，我们继续执行下一步：从CSS AST中删除未使用的部分。
我们声明了规则的侦听器，并可以获取规则的AST。要分析选择器部分，您需要基于“，”进行拆分，然后处理每个选择器。
选择器可以与PostCSS-Selector-Parser一起用于解析，分析和转换。
如果删除处理后的选择器，则意味着该规则的样式是没有用的，因此请删除此规则。否则，它可能只会删除某些选择器，并且将使用此样式。
选择器的以下分析和转换，即转换子函数。
该部分的逻辑是确定是否从每个选择器下的HTML提取的选择器（如果不是）删除。
我们已经完成了HTML中所选信息的提取，并且CSS用于根据HTML提取的信息删除无用的规则，并且已完成插件的功能。
让我们测试效果：
CSS：
html：
有理由删除了P，＃DDD，.BBB，EE和FF选择器的选择器和样式。
我们使用插头-in：
测试后，功能是正确的：
这是Purgecss的实现。我们完成了CSS的三个摇动！
该代码已上传到github：https：//github.com/quarkgluonplasma/postcss-plugin-earcerize
当然，我们只是通过简单版本实现，在某些地方不完整：
尽管它不是完美的，但已经传达了珀格斯人的实现，不是吗？
JS的Treeshking使用WebPack，Terser和CSS的Treeshking使用purgecss。
我们已经实施了一个简单的Purgecss，以阐明其实施原则：
通过HTML提取器在HTML中提取选择器信息，然后过滤CSS的AST，并根据是否使用规则的选择器来删除未使用的规则，以实现Treeshking的目的。
在实施此工具的过程中，我们了解了PostCSS和Postthtml插件的编写。这两种形式非常相似，但是CSS的分析和转换之一，一种用于HTML。
PostCSS可以分析和转换CSS。例如，在这里删除无用的CSS是一个很好的应用程序。您是否曾经看到过其他邮政信箱非常好的应用程序方案？让我们一起讨论?