社区首页 >专栏 >三款快速删除未使用CSS代码的工具

三款快速删除未使用CSS代码的工具

奋飛

发布于 2023-08-13 02:25:07

1.2K04

代码可运行

文章被收录于专栏：Super 前端Super 前端

运行总次数：4

代码可运行

针对历史项目或项目中有引入CSS框架（如Bootstrap），可能会存在大量的 CSS 样式未被使用。这可能产生一些不良的影响，如：

性能问题： 未使用的CSS会增加页面的加载时间，因为浏览器需要下载并解析这些不必要的样式表。这会导致页面加载速度变慢，影响用户体验，尤其是在低网络速度或较弱的设备上。
影响加载速度： 未使用的CSS会增加样式表的文件大小，从而占用更多的带宽和存储空间。这对于移动设备用户或网络流量有限的用户来说可能是一个问题。
可维护性下降： 当项目中存在大量无用的冗余样式时，代码库的整体可读性和可维护性都会下降。开发人员可能会在不确定哪些样式正在使用的情况下进行更改，这可能导致样式冲突和不一致。

如何解决呢？推荐三款工具，可根据项目情况进行选型：

PurgeCSS

PurgeCSS 通过分析你的内容和 CSS 文件，首先它将 CSS 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 CSS 中删除未使用的选择器，从而生成更小的 CSS 文件。

// webpack
const path = require('path')
const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-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')
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
    }),
  ]
}

UnCSS

UnCSS 的工作方式如下：

由 jsdom 加载 HTML 文件并执行 JavaScript 代码。
PostCSS 解析所有样式表
通过 document.querySelector 筛选出 HTML 文件中未找到的选择器。
将其余的样式规则转换回 CSS 代码。

由于其能够模拟 HTML 和 JavaScript 的执行，UnCSS 可以有效地从 web 应用程序中删除未使用的选择器。

但是，其模拟行为可能会在性能和实用性方面带来成本消耗。例如，要从 Pug 模板文件中删除未使用的 CSS，你需要将 Pug 转换为 HTML 并在 jsdom 中模拟页面。完成此步骤后，UnCSS 可以在每个选择器上运行 document.querySelector 并执行步骤 4。

目前，在删除未使用的 CSS 方面，UnCSS 在某些情况下可能是最准确的工具。如果你不使用服务器端渲染（server-side rendering），并且网站上只有简单的 HTML 和 javascript的话，则它应该可以正常工作，并且在 CSS 文件大小方面要优于 PurgeCSS。

PurgeCSS 针对 JavaScript 文件提供了一个提取器（extractor），目标是提供更准确的结果，这将在生成的 CSS 文件大小方面优于 UnCSS。由于 PurgeCSS 是模块化的，开发人员可以为特定框架（Vue、React、Aurelia）和文件类型（pug、ejs）创建提取器。这样，无需模拟（HTML 和 JavaScript 的执行）即可获得最准确的结果。

// postcss
postcss([require('uncss').postcssPlugin]);

PurifyCSS

PurifyCSS 可以支持任何文件类型，而不仅仅是 HTML 或 JavaScript。

PurifyCSS 的工作原理是查看文件中的所有单词，并将它们与 CSS 中的选择器进行比较。每个单词都被视为选择器，这意味着可能会错误地找到许多选择器。例如，有可能碰巧在一个段落中存在一个单词与 CSS 中的选择器相同。

PurgeCSS 通过支持自定义提取取器（extractor）来解决此问题。提取器是一个函数，它的作用是根据文件内容提取文件中使用所有的 CSS 选择器。它可以完美地删除未使用的 CSS。

提取器可用作解析器，该解析器返回 AST（抽象语法树）并在其中查找所有 CSS 选择器。这也是 purge-from-html 的工作方式。

你可以指定每种文件类型要使用的提取器，以获得最准确的结果。但是自定义提取器是可选的，你可以只使用默认的提取器。

// webpack相关配置
const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');

module.exports = {
  entry: {...},
  output: {...},
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].[contenthash].css'),
    // Make sure this is after ExtractTextPlugin!
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'app/*.html')),
    })
  ]
};