React资源预加载后渲染优化：解决SVG重复请求问题

针对你遇到的SVG图标两次请求的问题，核心原因是预加载阶段和组件渲染阶段分别发起了请求——即使第二次走缓存，依然存在冗余请求。以下是几种针对性的优化方案，可根据你的项目需求选择：

方案一：预加载后缓存SVG内容，渲染时直接内联 #

通过fetch预加载SVG并将内容存入内存缓存，组件渲染时直接使用内联SVG，彻底避免二次网络请求。

实现代码 #

// 全局资源预加载函数
const preloadAllResources = async () => {
  // 字体预加载（保留你的FontFaceObserver逻辑）
  const fontLoader = new FontFaceObserver('YourPrimaryFont');
  await fontLoader.load();

  // SVG资源预加载并缓存
  const svgResources = ['/icons/user.svg', '/icons/settings.svg'];
  window.svgCache = {};
  await Promise.all(
    svgResources.map(async (url) => {
      const res = await fetch(url);
      window.svgCache[url] = await res.text();
    })
  );

  // 图片资源预加载
  const imageResources = ['/assets/bg-hero.jpg', '/assets/logo.png'];
  await Promise.all(
    imageResources.map((url) => {
      return new Promise((resolve) => {
        const img = new Image();
        img.src = url;
        img.onload = img.onerror = resolve;
      });
    })
  );

  // 视频资源预加载
  const videoResources = ['/assets/intro.mp4'];
  await Promise.all(
    videoResources.map((url) => {
      return new Promise((resolve) => {
        const video = document.createElement('video');
        video.preload = 'auto';
        video.src = url;
        video.onloadeddata = video.onerror = resolve;
      });
    })
  );
};

// 入口组件控制渲染时机
function App() {
  const [isReady, setIsReady] = useState(false);
  const [loadFailed, setLoadFailed] = useState(false);

  useEffect(() => {
    preloadAllResources()
      .then(() => setIsReady(true))
      .catch(() => setLoadFailed(true));
  }, []);

  if (!isReady) return <div className="loading">加载中...</div>;
  if (loadFailed) return <div className="error">资源加载失败，请刷新重试</div>;

  return (
    <div className="app-container">
      {/* 使用缓存的SVG内容 */}
      <div 
        className="icon user-icon" 
        dangerouslySetInnerHTML={{ __html: window.svgCache['/icons/user.svg'] }}
      />
      {/* 图片/视频正常引用，预加载后直接走内存缓存 */}
      <img src="/assets/logo.png" alt="Logo" />
      <video src="/assets/intro.mp4" controls />
    </div>
  );
}

方案二：利用浏览器preload标签实现资源复用 #

通过HTML的link rel="preload"标签预加载资源，让浏览器直接将预加载的资源关联到后续渲染请求，避免重复发起请求。

步骤1：在public/index.html添加预加载标签 #

<!-- SVG预加载，指定正确的资源类型 -->
<link rel="preload" href="/icons/user.svg" as="image/svg+xml">
<link rel="preload" href="/icons/settings.svg" as="image/svg+xml">

<!-- 字体预加载需添加crossorigin -->
<link rel="preload" href="/fonts/your-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 图片、视频预加载 -->
<link rel="preload" href="/assets/bg-hero.jpg" as="image">
<link rel="preload" href="/assets/intro.mp4" as="video">

步骤2：React中监听资源加载完成状态 #

function App() {
  const [isAllLoaded, setIsAllLoaded] = useState(false);

  useEffect(() => {
    const checkResourcesReady = async () => {
      // 等待字体加载完成
      await new FontFaceObserver('YourPrimaryFont').load();

      // 检查所有预加载资源是否已加载
      const requiredUrls = [
        '/icons/user.svg',
        '/icons/settings.svg',
        '/assets/bg-hero.jpg',
        '/fonts/your-font.woff2'
      ];

      const checkResource = (url) => {
        return performance.getEntriesByType('resource').some(
          entry => entry.name.includes(url) && entry.responseStatus === 200
        );
      };

      // 轮询检查（设置超时避免无限等待）
      const interval = setInterval(() => {
        const allReady = requiredUrls.every(checkResource);
        if (allReady) {
          clearInterval(interval);
          setIsAllLoaded(true);
        }
      }, 100);

      setTimeout(() => {
        clearInterval(interval);
        setIsAllLoaded(true);
      }, 10000);
    };

    checkResourcesReady();
  }, []);

  if (!isAllLoaded) return <div className="loading">加载中...</div>;

  return (
    <div className="app-container">
      {/* 直接引用SVG，浏览器会复用预加载的资源 */}
      <img src="/icons/user.svg" alt="User Icon" className="icon" />
      {/* 其他资源正常引用 */}
    </div>
  );
}

方案三：将SVG转为React组件（彻底避免网络请求） #

使用SVGR（Create React App默认集成）将SVG打包为React组件，SVG内容直接内联到JS代码中，无需发起网络请求。

实现方式 #

// 直接导入SVG作为组件
import UserIcon from './icons/user.svg';
import SettingsIcon from './icons/settings.svg';

// 在组件中使用
function Header() {
  return (
    <div className="header">
      <UserIcon className="icon" />
      <SettingsIcon className="icon" />
    </div>
  );
}

这种方式下，SVG不会产生任何网络请求，配合字体、图片等资源的预加载逻辑，即可实现全资源加载后渲染的需求。

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