如何使用 PurgeCSS 减少文件大小

PurgeCSS 是一种工具，用于通过删除未使用的 CSS 来减小 CSS 文件的大小。由于 Tailwind CSS 是一个工具优先的框架，它生成了大量的实用类，如果不进行优化，可能会导致生成的 CSS 文件过大。通过 PurgeCSS，可以显著减少未使用的 CSS，从而提升页面加载速度。

1. 什么是 PurgeCSS

PurgeCSS 会分析你的项目代码，找到在 HTML、JavaScript、Vue 或 React 文件中使用的 CSS 类，然后移除未使用的类。它非常适合像 Tailwind 这样生成大量类名的框架。

2. Tailwind 和 PurgeCSS 集成

Tailwind 自带对 PurgeCSS 的支持，可以通过在 tailwind.config.js 文件中配置 purge 选项来轻松集成 PurgeCSS。

配置示例

在 tailwind.config.js 中，添加 purge 选项来指定要扫描的文件路径：

module.exports = {
  purge: {
    content: [
      './src/**/*.{html,js,jsx,ts,tsx,vue}', // 指定要扫描的文件路径
    ],
    options: {
      safelist: ['bg-red-500', 'text-lg'], // 可选：不想被删除的类名
    },
  },
  theme: {
    extend: {},
  },
  plugins: [],
}

解释 content: 这里指定要扫描的文件路径，例如 HTML、JS、Vue 文件等，PurgeCSS 会从这些文件中提取使用到的类名。 safelist: 可选的配置，用于防止某些类名被误删除。比如如果你有一些类名是动态生成的，PurgeCSS 无法在代码中检测到，你可以将这些类名手动添加到 safelist 中。

3. 安装 PurgeCSS

如果你需要更细粒度的控制，你可以手动安装并配置 PurgeCSS。以下是使用 PostCSS 和 PurgeCSS 的步骤。

安装 PurgeCSS 首先，你需要安装 PurgeCSS 和 PostCSS 插件：

npm install @fullhuman/postcss-purgecss --save-dev

配置 PostCSS 与 PurgeCSS 接下来，在你的 postcss.config.js 中配置 PurgeCSS：

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    purgecss({
      content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'], // 要扫描的文件路径
      safelist: ['bg-red-500', 'text-lg'], // 不要删除的类名
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [], // 提取类名的正则表达式
    }),
  ],
}

解释

  • content: 指定要扫描的文件路径，PurgeCSS 会检查这些文件并提取使用到的类名。
  • safelist: 这里可以定义你不希望被删除的类名，以确保某些动态类或条件类名不会被误删。
  • defaultExtractor: 这个函数会从文件内容中提取所有可能的类名，确保在代码中使用的类名被正确保留。

4. 构建 Tailwind 项目

配置好 PurgeCSS 之后，当你在生产环境中构建项目时，PurgeCSS 会自动移除未使用的类名。一般来说，你可以通过以下命令进行构建：

npm run build

这会生成经过 PurgeCSS 优化的 CSS 文件，文件大小会显著减小。

示例：优化前后的文件大小 优化前: 可能会有超过 3MB 的 CSS 文件，因为 Tailwind 默认会生成大量的类名。 优化后: 使用 PurgeCSS 后，CSS 文件可能会减小到数百 KB，具体取决于你项目中实际使用的类名数量。

5. PurgeCSS 的最佳实践

为了确保 PurgeCSS 的配置能够有效减少文件大小且不影响页面样式，以下是一些最佳实践：

1. 避免使用动态生成的类名

由于 PurgeCSS 只能扫描静态文件，因此如果你的类名是通过 JavaScript 动态生成的，PurgeCSS 可能会误删这些类名。尽量使用固定的类名，或者将动态类名添加到 safelist 中。

2. 小心使用第三方库

如果你使用了第三方库（如插件、组件库）并且这些库的类名没有出现在你的代码中，PurgeCSS 也可能会删除它们。确保你对第三方库中使用的类名做好 safelist 处理。

3. 只在生产环境中使用 PurgeCSS

PurgeCSS 通常只在生产环境中启用，因为它会影响开发调试时的类名保留。你可以在构建命令中区分生产和开发环境，确保只有在生产环境中启用 PurgeCSS。

if (process.env.NODE_ENV === 'production') {
  // 启用 PurgeCSS
}

6. 总结

通过使用 PurgeCSS，你可以显著减少 Tailwind CSS 的输出文件大小，确保只包含实际使用的类名，从而提高网页的加载速度和性能。合理配置 PurgeCSS，并遵循最佳实践，能够帮助你构建高效、优化的 Tailwind CSS 项目。

Last Updated::