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

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

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

什么是PurgeCSS

PurgeCSS是一款强大的工具，它通过分析项目中的HTML、JavaScript等文件，识别出实际使用到的CSS选择器，然后从CSS文件中移除未使用的样式规则。这对于使用大型CSS框架（如Bootstrap、TailwindCSS等）的项目特别有用，可以显著减少最终打包的CSS文件体积。

Next.js与PurgeCSS集成方案

在Next.js项目中，有两种主要方式集成PurgeCSS：

1. 通过PostCSS配置（推荐，适用于Next.js 9.3+版本）

这是目前最推荐的集成方式，因为Next.js 9.3+版本内置了PostCSS支持。以下是详细配置步骤：

1. 在项目根目录创建postcss.config.js文件
2. 安装必要的PostCSS插件：

   npm install postcss-flexbugs-fixes postcss-preset-env @fullhuman/postcss-purgecss --save-dev
   

3. 配置PostCSS：

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009"
        },
        stage: 3,
        features: {
          "custom-properties": false
        }
      }
    ],
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
          './pages/**/*.{js,jsx,ts,tsx}',
          './components/**/*.{js,jsx,ts,tsx}'
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"]
      }
    ]
  ]
}

重要说明：

• Next.js默认的HTML和body样式位于node_modules中，必须通过safelist选项显式保留
• 自定义PostCSS配置会完全覆盖Next.js默认配置，需要手动包含所有需要的功能

2. 通过next-purgecss插件（适用于Next.js 9.3以下版本）

对于较旧的Next.js版本，可以使用专门的next-purgecss插件：

1. 首先安装必要的依赖：

   npm install @zeit/next-css next-purgecss --save-dev
   

2. 修改next.config.js配置：

const withCss = require("@zeit/next-css");
const withPurgeCss = require("next-purgecss");

module.exports = withCss(withPurgeCss());

高级配置选项

环境控制

可以控制PurgeCSS只在生产环境生效：

module.exports = withCss(
  withPurgeCss({
    purgeCssEnabled: ({ dev, isServer }) => !dev && !isServer
  })
);

自定义扫描路径

默认扫描pages和components目录，可以扩展：

module.exports = withCss(
  withPurgeCss({
    purgeCssPaths: [
      "pages/**/*",
      "components/**/*",
      "layouts/**/*"
    ]
  })
);

白名单配置

确保某些类名不会被移除：

module.exports = withCss(
  withPurgeCss({
    purgeCss: {
      safelist: ["my-special-class", /^swiper-/]
    }
  })
);

最佳实践

1. 开发与生产环境分离：建议只在生产构建时启用PurgeCSS，开发环境保持完整CSS以便调试
2. 定期检查：构建后检查页面确保没有意外移除必要样式
3. 动态类名处理：对于动态生成的类名（如class-${variable}），确保在配置中包含模式匹配
4. 第三方组件：如果使用第三方UI库，可能需要将其添加到扫描路径或白名单中

通过合理配置PurgeCSS，可以显著优化Next.js应用的CSS体积，提升页面加载性能，特别是在使用大型CSS框架时效果尤为明显。

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