1. 首页
  2. css

CSS未使用

我最近写了一篇关于\”未使用的CSS\”工具的文章,我试图列举任何工具在寻找真正\”未使用的\”CSS时都会遇到的所有挑战。总体思想是,CSS选择器与DOM中的元素匹配,而DOM中的元素来自各种地方:静态模板、基于服务器端状态的动态模板,当然还有JavaScript,JavaScript可以以任何方式操纵DOM,包括从API和第三方获取内容。有了这一切,任何工具怎么能给我们一个未使用的CSS的真正准确的图片,以至于实际上删除CSS并不像不使用它那样危险呢?所以,我说:
但是,我不认为这些工具是无用的-它们只是……工具。它们的使用实际上是朝着更好的代码迈出的积极一步。他们的使用表明,好吧,我承认,我有点害怕我们的CSS。您可以使用这个工具来获得您未使用的CSS可能是什么的大致情况,然后结合您自己对CSS代码库的了解来做出更明智的决定。
我支持这一点,并且值得指出一些成功的用例。
莎拉Dayan刚刚写了我如何用PurgeCSS减少250KB的CSS权重。她使用的是Tailwind CSS,一个很多人都成功使用过的原子CSS库。在我的例子中,我不仅加载了整个Tailwind CSS库,还向一些模块添加了一些变体。最终缩小后的CSS文件的重量为259 KB(在GZip之前)。当GZip压缩时,它是第十个,但仍然是很多CSS。Tailwind建议使用PurgeCSS,Sarah就是这么做的。PurgeCSS不处理我提到的任何东西,比如状态变量和JavaScript等等,但是它会查看任何静态文件,您希望它同时处理内容和CSS,并从中进行分析。更妙的是,莎拉知道她有一些第三方的东西,所以她特别处理了这种情况:
PurgeCSS无法检测到我需要保留选择器,比如.ais-Highlight,因为使用它的组件只在运行时出现在DOM中。
所以她分离了一些CSS并更新了配置。然后…
通过这个新配置,我的最终CSS文件已经从259 KB变成了…9 KB!我喜欢它。使用这个工具,超级清楚你的站点上发生了什么,并为最终的胜利做出最终的选择。
莎拉还提到了这个未使用CSS的概念与未使用JavaScript的概念在精神上是如何联系在一起的。在JavaScript中,它被称为树抖动,正如Jeremy Wagner所说:
树抖动是消除死代码的一种形式。
我更信任树抖动的工具。这些是用JavaScript编写的工具,用于查看JavaScript以发现未使用的JavaScript。似乎技术的交叉点并不像我们谈论摇摇树时那么宽。尽管如此,仍然可能有一些事情,比如在站点上调用公共函数的已配置第三方,或者直接在HTML元素上调用事件处理程序。这些日子对我来说似乎有点罕见,但那只是我自己的经验偏见

CSS未使用 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%9c%aa%e4%bd%bf%e7%94%a8/