使用Create React App时如何提取关键CSS并解决渲染阻塞问题

Hey there! Let’s break down your two Create React App CSS-related questions clearly—these are super common performance optimizations, so I’ve got practical, actionable solutions for you.

Critical CSS refers to the minimal styles needed to render the above-the-fold content of your page. Here are your two main paths to separate it from the rest of your styles:

Non-Eject Approach (Highly Recommended) #

Ejecting from Create React App is irreversible and forces you to maintain your own Webpack config, so using react-app-rewired + customize-cra is the way to go for extending config without ejecting:

• First, install the required dependencies:

npm install react-app-rewired customize-cra mini-css-extract-plugin critical --save-dev

• Create a config-overrides.js file in your project root to configure CSS extraction:

const { override, addWebpackPlugin } = require('customize-cra');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = override(
  // Extract CSS into separate files instead of bundling with JS
  addWebpackPlugin(
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    })
  )
);

• Update your package.json scripts to use react-app-rewired and run the critical CSS extraction after building:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build && critical --src build/index.html --dest build/index.html --inline",
  "test": "react-app-rewired test"
}

The critical CLI will crawl your built homepage, extract the above-the-fold styles, and inline them directly into index.html—the remaining CSS will load asynchronously, avoiding render blocking.

Eject Approach (Not Recommended) #

If you’ve already ejected, you can directly modify webpack.config.js to add MiniCssExtractPlugin (similar to the code above), then run the same critical CLI command post-build. Just keep in mind that ejecting means you’ll have to maintain all Webpack updates yourself going forward.

If you can’t touch the Webpack config at all (no eject, no rewired), these workarounds will get the job done:

• Manual Critical CSS Inlining + Async Non-Critical CSS

  1. Run npm run build to generate your production files.
  2. Use Chrome DevTools’ Coverage panel to identify above-the-fold CSS: Open DevTools → More Tools → Coverage → Refresh the page → Filter for CSS → Copy the styles marked as used for the initial render.
  3. Paste these critical styles into a <style> tag directly in public/index.html.
  4. Load non-critical CSS asynchronously in your src/index.js using dynamic imports:

  // Async load non-critical styles after the initial render
  import('./App.css').catch(err => console.error('Failed to load CSS:', err));
  

• Automated Critical CSS with critical CLI
  You don’t need to touch Webpack to use this tool—just run it after your standard build:

  1. Install critical:

  npm install critical --save-dev
  

  2. Update your build script in package.json:

  "scripts": {
    "build": "react-scripts build && critical --src build/index.html --dest build/index.html --inline --width 1200 --height 900"
  }
  

  This will automatically crawl your built homepage (using the specified width/height to simulate desktop and mobile), inline critical CSS, and convert the full CSS file to load asynchronously—no config edits needed.

• Component-Level CSS Lazy Loading
  Use React’s built-in lazy loading to load component-specific styles only when the component is rendered:

  import React, { Suspense } from 'react';
  
  // Lazy load a component and its associated CSS (works with CSS Modules or styled-components)
  const LazyFeature = React.lazy(() => import('./LazyFeature'));
  
  function App() {
    return (
      <div>
        {/* Above-the-fold content loads immediately */}
        <header>My Header</header>
        
        {/* Lazy-loaded content (and its CSS) loads after initial render */}
        <Suspense fallback={<div>Loading...</div>}>
          <LazyFeature />
        </Suspense>
      </div>
    );
  }
  

  This ensures non-critical styles tied to off-screen components never block the initial render.

内容的提问来源于stack exchange，提问作者yam55