当前位置：首页 > news >正文

提取关键 CSS: react 的项目中如何使用criticalCSS

news 来源：原创 2025/5/22 23:43:44

在 React 项目中优化首屏加载性能时，Critical CSS（关键 CSS）是一项重要技术。以下是详细步骤和实现方法：

一、Critical CSS 的作用

首屏优化：提取渲染首屏内容所需的最小 CSS，内联到 HTML 中，减少渲染阻塞。
异步加载非关键 CSS：延迟加载剩余 CSS，提升页面加载速度。

二、实现方法（基于不同工具链）

1. 使用 Webpack 插件（如 `critters-webpack-plugin`）

适用场景：基于 Webpack 的 React 项目（如 Create React App）。

步骤：

安装插件：

npm install critters-webpack-plugin --save-dev

修改 Webpack 配置（如 webpack.config.js）：

const Critters = require('critters-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new Critters({
      // 配置选项（可选）：
      preload: 'swap', // 异步加载非关键 CSS 的方式
      inlineThreshold: 5000, // 小于 5KB 的 CSS 直接内联
    }),
  ],
};

确保 HTML 模板正确引用：
使用 html-webpack-plugin 确保 CSS 文件自动注入到 HTML 中。

2. 使用 Vite 插件（如 `vite-plugin-critical`）

适用场景：Vite 构建的 React 项目。

步骤：

安装插件：

npm install vite-plugin-critical --save-dev

修改 vite.config.js：

import critical from 'vite-plugin-critical';

export default {
  plugins: [
    critical({
      criticalUrl: './dist/index.html', // 指定生成的 HTML 文件
      criticalBase: './dist',           // 构建目录
      criticalPages: [{ uri: '/', template: 'index' }],
    }),
  ],
};

3. 手动提取（适用于简单项目）

步骤：

使用 Chrome Coverage 工具（DevTools → Coverage）分析首屏需要的 CSS。
手动提取关键 CSS，内联到 HTML 的 <style> 标签中。

异步加载剩余 CSS：

<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

三、处理 CSS-in-JS（如 styled-components）

问题：CSS-in-JS 在运行时生成样式，需静态提取关键 CSS。

解决方案：

使用 styled-components 的 ServerStyleSheet（SSR 场景）：

import { ServerStyleSheet } from 'styled-components';

// 服务端渲染时提取关键样式
const sheet = new ServerStyleSheet();
const html = renderToString(sheet.collectStyles(<App />));
const criticalCSS = sheet.getStyleTags(); // 内联到 HTML

静态提取工具：
结合 babel-plugin-styled-components 和构建时提取。

四、结合 Next.js 的优化

Next.js 内置了 CSS 优化，可通过以下方式增强：

内联关键 CSS：

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { extractCritical } from '@emotion/server';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    const styles = extractCritical(initialProps.html);
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style dangerouslySetInnerHTML={{ __html: styles.css }} />
        </>
      ),
    };
  }
}