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

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

一、Critical CSS 的作用

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

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

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

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

步骤：

1. 安装插件：

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

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

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

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

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

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

步骤：

1. 安装插件：

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

2. 修改 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. 手动提取（适用于简单项目）

步骤：

1. 使用 Chrome Coverage 工具（DevTools → Coverage）分析首屏需要的 CSS。
2. 手动提取关键 CSS，内联到 HTML 的 <style> 标签中。
3. 异步加载剩余 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。

解决方案：

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

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

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

四、结合 Next.js 的优化

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

1. 内联关键 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 }} />
           </>
         ),
       };
     }
   }
   

2. 使用 @next/optimized-critical：
   自动提取关键 CSS 并内联。

五、最佳实践

1. 测试覆盖范围：
   使用 Lighthouse 或 WebPageTest 分析首屏性能。
2. 监控 CSS 大小：
   确保关键 CSS ≤ 15KB（经过压缩）。
3. 缓存非关键 CSS：
   异步加载的 CSS 应设置长期缓存。

六、常见问题

Q1：样式冲突如何处理？

• 使用 CSS 命名约定（如 BEM）或 CSS Modules 避免冲突。

Q2：动态路由如何处理关键 CSS？

• 服务端渲染（SSR）时动态提取关键 CSS，或为每个路由生成静态关键 CSS。

Q3：如何自动化流程？

• 结合 CI/CD 工具，在构建阶段自动提取和注入关键 CSS。

通过以上方法，你可以在 React 项目中高效应用 Critical CSS，显著提升首屏加载性能。