Nuxt + Vite + PurgeCSS 配置

在使用 Nuxt 3 搭配 Vite 的项目中，有时候会生成大量未使用的 CSS 文件，这会增加打包体积。为了优化性能，可以使用 vite-plugin-purgecss 自动移除未使用的 CSS。

安装

npm install vite-plugin-purgecss -D
# 或者使用 yarn
yarn add vite-plugin-purgecss -D

配置示例

在 nuxt.config.ts 中添加 Vite 插件：

import purgeCss from "vite-plugin-purgecss";

export default defineNuxtConfig({
  vite: {
    plugins: [purgeCss()],
  },
});

配置说明

• purgeCss()：默认会扫描你的项目文件，自动删除没有使用的 CSS 类。
• 配置项可自定义，例如指定扫描路径或保留特定类名。

purgeCss({
  content: [
    './components/**/*.vue',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.ts',
  ],
  safelist: ['html', 'body'], // 保留不被删除的类名
})

优势

1. 减少最终打包的 CSS 文件大小。
2. 提高页面加载速度。
3. 自动化处理，不用手动去管理 CSS。

注意事项

• 确保插件只在生产环境使用，否则可能会删除开发时动态添加的类。
• 对于动态生成的类名（如 v-bind:class）需要加入 safelist。

---

通过以上配置，你的 Nuxt 项目在使用 Vite 打包时可以有效减少未使用 CSS，从而提升性能和加载速度。