React中仅在组件渲染时加载对应CSS的实现方案

核心原因 #

静态import语句会在编译阶段被Webpack解析并打包，不管对应的组件是否会被渲染，所以两个组件的CSS都会被提前加载到页面中。要解决这个问题，必须改用动态加载的方式，让资源仅在组件需要渲染时才被加载。

方案1：React.lazy + Suspense 组件级懒加载 #

利用React的React.lazy实现组件的动态导入，Webpack会自动将该组件及其关联的CSS打包为独立的代码块（chunk），只有当组件被渲染时，这个chunk才会被加载。

步骤：

1. 确保你的Babel配置支持动态导入（如果使用Babel），安装@babel/plugin-syntax-dynamic-import并添加到插件列表：

// .babelrc 或 babel.config.json
{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

2. 替换静态导入为动态导入：

import { Suspense, useState } from 'react';

// 动态导入两个组件
const ComponentA = React.lazy(() => import('./ComponentA'));
const ComponentB = React.lazy(() => import('./ComponentB'));

function ParentComponent() {
  const [useA, setUseA] = useState(true);

  return (
    <div>
      <button onClick={() => setUseA(!useA)}>切换组件</button>
      {/* 用Suspense包裹懒加载组件，指定加载时的占位内容 */}
      <Suspense fallback={<div>加载中...</div>}>
        {useA ? <ComponentA /> : <ComponentB />}
      </Suspense>
    </div>
  );
}

说明：

• Webpack 4完全支持这种动态导入方式，会自动拆分代码块。
• React 18的Suspense在客户端渲染中可以正常使用，无需额外配置。

方案2：手动动态加载/卸载CSS #

如果不想懒加载组件本身，只想控制CSS的加载时机，可以在组件的生命周期中手动创建/移除CSS链接标签。

示例代码（ComponentA.jsx）：

import { useEffect } from 'react';

function ComponentA() {
  useEffect(() => {
    // 创建link标签加载CSS
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = require('./ComponentA.css').default; // Webpack会处理该路径
    
    document.head.appendChild(link);

    // 组件卸载时移除CSS
    return () => {
      document.head.removeChild(link);
    };
  }, []);

  return <div>组件A内容</div>;
}

export default ComponentA;

说明：

• require('./ComponentA.css').default是Webpack处理CSS文件后的导出格式（适配style-loader或mini-css-extract-plugin）。
• 该方式可以精准控制CSS的加载时机，若需避免重复加载，可通过全局变量或状态判断CSS是否已加载。

方案3：条件分支中动态导入组件 #

直接在条件判断中使用import()函数触发组件和CSS的加载，这种方式更灵活，适合复杂的条件场景。

示例代码：

import { useState, useEffect } from 'react';

function ParentComponent() {
  const [useA, setUseA] = useState(true);
  const [CurrentComponent, setCurrentComponent] = useState(null);

  useEffect(() => {
    // 根据条件动态导入组件
    const importPromise = useA ? import('./ComponentA') : import('./ComponentB');
    
    importPromise.then(module => {
      setCurrentComponent(module.default);
    });
  }, [useA]);

  if (!CurrentComponent) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <button onClick={() => setUseA(!useA)}>切换组件</button>
      <CurrentComponent />
    </div>
  );
}

说明：

• 每次条件切换时，会触发对应的组件chunk加载，未满足条件的组件及其CSS不会被加载。
• Webpack会自动拆分每个动态导入的组件为独立chunk，无需额外配置。

内容的提问来源于stack exchange，提问作者Rama Rao M