在Nuxt.js项目中使用PurgeCSS优化CSS体积-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00181/article/details/148441671

在Nuxt.js项目中使用PurgeCSS优化CSS体积

purgecss Remove unused CSS 项目地址: https://gitcode.com/gh_mirrors/pu/purgecss

什么是PurgeCSS？

PurgeCSS是一款用于移除未使用CSS代码的工具，它通过分析项目中的HTML、JavaScript等文件内容，智能识别出实际被使用的CSS选择器，从而大幅减少最终打包的CSS文件体积。对于使用Nuxt.js框架开发的项目来说，集成PurgeCSS可以显著提升页面加载性能。

Nuxt.js集成PurgeCSS的两种方式

方式一：使用nuxt-purgecss模块

这是为Nuxt.js量身定制的PurgeCSS集成方案，提供了开箱即用的配置和简化的使用流程。

安装步骤

通过包管理器安装模块依赖
在nuxt.config.js配置文件中添加模块声明

{
  buildModules: [ // Nuxt 2.9.0+使用buildModules
    'nuxt-purgecss',
  ],
  
  purgeCSS: {
    // 自定义配置项
  }
}

核心配置选项详解

运行模式(mode)
- 可选值：webpack/postcss
- 默认值：webpack
- 注意事项：webpack模式需要启用build.extractCSS
启用条件(enabled)
- 类型：布尔值或函数
- 默认行为：生产环境下自动启用
- 可通过函数实现更精细的控制逻辑
扫描路径(paths)
- 默认包含项目主要目录结构
- 支持glob模式匹配语法
- 会自动与默认路径合并
白名单(whitelist)
- 保护必要的选择器不被清除
- 默认包含基础HTML元素和Nuxt进度条

最佳实践建议

对于大多数项目，默认配置已经足够
动态生成的类名需要显式加入白名单
开发环境建议禁用以保持热更新速度

方式二：使用PostCSS插件

这种方式适合需要更精细控制PurgeCSS行为的项目。

安装步骤

安装PostCSS插件包
在PostCSS配置中添加PurgeCSS规则

'@fullhuman/postcss-purgecss': {
  content: [
    './pages/**/*.vue',
    './layouts/**/*.vue',
    './components/**/*.vue'
  ],
  safelist: ['html', 'body']
}

注意事项

此方式会在所有环境生效
需要手动指定扫描路径
相比模块方式需要更多配置工作

方案对比与选型建议

| 特性 | nuxt-purgecss模块 | PostCSS插件 | |------|------------------|------------| | 配置复杂度 | 低 | 中 | | 环境隔离 | 支持 | 不支持 | | 默认配置 | 完善 | 需自定义 | | 适用场景 | 大多数Nuxt项目 | 特殊需求项目 |

对于大多数Nuxt.js项目，推荐优先考虑nuxt-purgecss模块，它提供了更符合Nuxt生态的集成方式和合理的默认配置。只有在有特殊定制需求时，才需要考虑直接使用PostCSS插件方案。