删

删除未使用的 CSS

2025-06-07

删除未使用的 CSS

未使用的 CSS 是大多数 Web 应用程序在性能和页面加载时间方面遇到的问题之一。

免责声明

除了本文提到的方法一之外，大多数情况下，你需要一个工具和一些手动干预才能安全地清除未使用的 CSS。这些工具的妙处在于，它们会让你知道哪些你不知道的内容；你的模板文件中哪些类没有被使用。

这些工具无法处理复杂的场景，例如当您使用 JavaScript 在模板中添加 DOM 元素时。

当单页应用程序（SPA）中的动态模板或模板根据服务器端代码的状态发生变化时，他们会遇到问题。

问题

正如我所说，未使用的 CSS 是大多数 Web 应用程序在性能和页面加载时间方面遇到的问题之一。

当你使用像 Tailwind 这样的 CSS 库，或者像Bootstrap或Material Design这样的旧版本的 CSS 框架时，情况会变得更糟。

注意：大多数 CSS 框架已转向模块化结构，您可以只导入所需的部分，而不必包含整个包。

最佳和最安全的方法

我认为，最好、最安全的做法是小心谨慎，删除从 HTML 或模板文件中删除的任何 CSS 文件或部分。面对这样的技术债务，切勿偷懒或无知。如果你参与的是新项目，请确保不要从你正在研究的地方复制粘贴大量 CSS，而没有意识到哪些部分是实际使用的。

您可以按照以下步骤使用Google Chrome中的DevTools手动查找未使用的 CSS ：

  1. 在 Windows 或Mac 上使用F12或打开 Chrome DevTools 。Ctrl Shift JCommand Option J
  2. Ctrl Shift P在 Windows 或Command Shift JMac 上按 打开命令菜单。
  3. 输入“覆盖范围”并点击“显示覆盖范围”选项
  4. 单击覆盖范围选项卡上的重新加载按钮。
  5. 从“覆盖范围”选项卡中选择一个 CSS 文件，该文件将在“源”选项卡中打开。

任何左侧带有实心绿线的 CSS 规则均会被使用。带有红线的规则则不会被使用：

未使用的 CSS

警告：某条规则在本页面未使用，并不意味着它在其他地方未使用。理想情况下，您应该检查所有页面的覆盖率，并将结果合并，以便更好地概览。

工具

有时你会因为各种原因而无法坚持☝🏼要点。比如你参与了一个“棕地”项目，或者代码库太大，无法及时重构和修复问题。

在这种情况下，您可能正在寻找一些工具来自动化该过程，并在构建期间系统地进行清理。幸运的是，有很多工具可以帮助您做到这一点。我将介绍一些著名的工具，并在最后列出一个简短的列表，以作参考😉。

1. PurifyCSS

PurifyCSS是一款可以分析文件、检查代码并找出未使用的 CSS 类的工具。大多数情况下，如果您使用的是静态 HTML 文件，此工具几乎可以清除所有未使用的 CSS。

除此之外，它还可以在一定程度上与单页应用程序（SPA）协同工作。

设置

独立

您可以通过以下方式安装此软件包npm：

npm i -D purify-css
Enter fullscreen mode Exit fullscreen mode

以及一些基本用法：

import purify from 'purify-css'
const purify = require('purify-css')

let content = ''
let css = ''
let options = {
  output: 'filepath/output.css',
}
purify(content, css, options)
Enter fullscreen mode Exit fullscreen mode

如果你觉得这对我来说没什么用，你可能是对的。但这是最简单的形式。实际上，在命令中purify，content参数css可以是Arrayglob文件模式。现在你可以看到更宏观的视角，以及它是如何发挥作用的。

现在让我们让它变得更复杂一些。

通过 Grunt

首先需要安装 grunt 包：

npm install grunt-purifycss --save-dev
Enter fullscreen mode Exit fullscreen mode

然后使用它：

grunt.initConfig({
  purifycss: {
    options: {},
    target: {
      src: ['path/to/*.html', 'path/to/*.js'],
      css: ['path/to/*.css'],
      dest: 'tmp/purestyles.css',
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

即使你使用 JavaScript 😍 添加了一个类，它也能处理这种情况。所以这会被选中：

<!-- html -->
<!-- class directly on element -->
<div class="button-active">click</div>
Enter fullscreen mode Exit fullscreen mode

或者用 JavaScript 来写：

// javascript
// Anytime your class name is together in your files, it will find it.
$(button).addClass('button-active')
Enter fullscreen mode Exit fullscreen mode

或者更复杂一点的情况：

// Can detect if class is split.
var half = 'button-';
$(button).addClass(half + 'active');

// Can detect if class is joined.
var dynamicClass = ['button', 'active'].join('-');
$(button).addClass(dynamicClass);

// Can detect various more ways, including all Javascript frameworks.
// A React example.
var classes = classNames({
  'button-active': this.state.buttonActive
});

return (
  <button className={classes}>Submit</button>;
);
Enter fullscreen mode Exit fullscreen mode

警告：purifycss 的 Webpack 插件已弃用。您需要使用 Purgecss，稍后我会详细介绍。

命令行界面

安装 CLI：

npm install -g purify-css
Enter fullscreen mode Exit fullscreen mode

您可以使用参数查看帮助-h：

purifycss -h

purifycss <css> <content> [option]

Options:
  -m, --min        Minify CSS                                   [boolean] [default: false]
  -o, --out        Filepath to write purified css to                              [string]
  -i, --info       Logs info on how much css was removed        [boolean] [default: false]
  -r, --rejected   Logs the CSS rules that were removed         [boolean] [default: false]
  -w, --whitelist  List of classes that should not be removed        [array] [default: []]
  -h, --help       Show help                                                     [boolean]
  -v, --version    Show version number                                           [boolean]
Enter fullscreen mode Exit fullscreen mode

统计数据

这个库可以帮你大忙。它非常有效，并且适用于复杂的场景。但正如我之前提到的，你需要进行良好的测试，以便在清理后发现是否有任何问题。

就 Boostrap 而言，PurifyCSS 可以减少高达 ~33.8% 的未使用 CSS。

2. Purgecss

Purgecss是另一个强大的工具，可以删除未使用的 CSS。它可以作为开发工作流程的一部分。它附带 JavaScript API、CLI 以及适用于流行构建工具的插件。

命令行界面

您可以Purgecss全局安装或使用npx。

npm i -g Purgecss
Enter fullscreen mode Exit fullscreen mode

并使用它：

Purgecss --css <css> --content <content> [option]
Enter fullscreen mode Exit fullscreen mode

正如您所见，API 与 非常相似PurifyCSS，但选项当然会有所不同。

通过 Webpack

您应该先安装插件：

npm i -D Purgecss-webpack-plugin
Enter fullscreen mode Exit fullscreen mode

并将其添加到你的 Webpack 配置中：

const path = require('path')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const PurgecssPlugin = require('Purgecss-webpack-plugin')

const PATHS = {
  src: path.join(__dirname, 'src'),
}

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?sourceMap',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('[name].css?[hash]'),
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, {
        nodir: true,
      }),
    }),
  ],
}
Enter fullscreen mode Exit fullscreen mode

欲了解更多信息，请参阅他们的文件。

3. UnCSS

UnCSS是另一个帮助你删除未使用 CSS 的工具。但它略有不同，它会先将你的文件加载到jsdom中，然后使用 PostCSS 解析所有样式表。

完成后，document.querySelector将过滤掉 HTML 文件中不存在的选择器。最后，将剩余的规则转换回 CSS。

注意：这个库最好的地方是我最喜欢的，是它们的非官方服务器，你可以在其中粘贴你的 HTML 和 CSS，它会在线显示缩短的 CSS。

安装

再次，您可以使用npm来安装它或使用npx：

npm i -g uncss
Enter fullscreen mode Exit fullscreen mode

您可以将 UnCSS 与节点一起使用：

var uncss = require('uncss')

var files = [
    'my',
    'array',
    'of',
    'HTML',
    'files',
    'or',
    'http://urls.com',
  ],
  options = {
    ignore: ['#added_at_runtime', /test\-[0-9]+/],
    media: [
      '(min-width: 700px) handheld and (orientation: landscape)',
    ],
    csspath: '../public/css/',
    raw: 'h1 { color: green }',
    stylesheets: [
      'lib/bootstrap/dist/css/bootstrap.css',
      'src/public/css/main.css',
    ],
    ignoreSheets: [/fonts.googleapis/],
    timeout: 1000,
    htmlroot: 'public',
    report: false,
    banner: false,
    uncssrc: '.uncssrc',
    userAgent:
      'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
    inject: function(window) {
      window.document
        .querySelector('html')
        .classList.add('no-csscalc', 'csscalc')
    },
  }

uncss(files, options, function(error, output) {
  console.log(output)
})

/* Look Ma, no options! */
uncss(files, function(error, output) {
  console.log(output)
})

/* Specifying raw HTML */
var rawHtml = '...'

uncss(rawHtml, options, function(error, output) {
  console.log(output)
})
Enter fullscreen mode Exit fullscreen mode

或者使用他们支持 Gulp、Grunt 和 Broccoli 的构建流程（可惜不支持 Webpack 😔）。有关如何设置这些工具的更多信息，请参阅他们的文档。

比较

现在让我们比较一下这些工具，看看它们的优缺点。

PurifyCSS

有些人认为 PurifyCSS 最大的问题是缺乏模块化。但也有人认为这恰恰是它最大的优点🤷🏽‍♂️。它不仅可以处理 HTML，还可以处理任何类型的文件。它还可以查找使用 JavaScript 添加的选择器。

不幸的是，由于每个单词都被视为一个选择器，这可能会导致很多误报，并使生成的 CSS 比应有的要大一些。

普尔奇斯

Purgecss 通过提供创建提取器的功能解决了上述问题。提取器只是一个函数，它获取文件内容并提取其中使用的 CSS 选择器列表。

提取器可以用作解析器，返回 AST（抽象语法树）并对其进行查找以查找任何 CSS 选择器。这就是它的purge-from-html工作原理。您可以指定每种文件类型要使用的选择器，从而获得最准确的结果。此外，您还可以使用默认或旧版提取器，它们将模仿 PurifyCSS 的行为。

话虽如此，Purgecss 也有一些缺点。首先，你需要为像 这样的框架编写一个自定义提取器。另一个问题是当你使用像primjsTailwind这样的语法高亮器时，你必须使用名为 的属性将你的 token 类列入白名单。whitelistPatternsChildren

另一个需要考虑的点是，Purgecss 没有 JavaScript 文件的提取器。但由于其模块化特性，开发人员可以为Angular、React或Vue等框架创建自定义提取器。

联合国CSS

由于其 HTML 模拟和 JavaScript 执行功能，UnCSS 能够有效地从 Web 应用程序中移除未使用的选择器。然而，这种模拟可能会在性能和实用性方面有所损失。

目前，如果您不使用服务器端渲染，UnCSS 可能是删除未使用的 CSS 最准确的工具。

其他工具

以下是您可以考虑的其他工具：

  • GitBit：一个在线工具，可以抓取您的根页面和其中链接的样式表。
  • UnusedCSS：另一个在线工具，可以轻松查找和删除未使用的 CSS 规则

概括

虽然这些工具在查找未使用的 CSS 方面确实很有帮助，但它们各有缺点，您需要小心，以免导致 UI 损坏。

希望您对如何查找未使用的 CSS 并将其部署到空间有了一点了解😁👇。

文章来源：https://dev.to/yashints/knock-out-your-unused-css-2o57
Devto 翻译
PREV
让我们了解一下 ResizeObserver 👋🏼
NEXT
TensorFlow.js 入门