Preload 在 React 中怎么正确使用？为什么资源没被提前加载？

令狐卫华提问于 2026-03-10 08:11:22 阅读 9

优化

我在 React 项目里想用 preload 提前加载一个重要的 JSON 配置文件，但发现浏览器并没有在页面加载初期就请求它，而是等到组件挂载后才发起请求。是不是我的写法有问题？

我试过在 useEffect 里动态创建 link 标签，也试过在 HTML 模板里直接写 <link rel="preload">，但都不太理想。下面是我目前的组件代码：

useEffect(() => {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'fetch';
  link.href = '/config.json';
  link.crossOrigin = 'anonymous';
  document.head.appendChild(link);

  return () => {
    document.head.removeChild(link);
  };
}, []);

但 Network 面板里看到 config.json 还是等到 JS 执行后才加载，完全没有“预”加载的效果。到底该怎么正确使用 preload 啊？

我来解答赞 14 收藏

反馈

2 条解答

皇甫鑫丹 Lv1

你的问题在于 useEffect 里动态创建 link 标签完全是马后炮——此时页面已经加载完了，浏览器该发的请求早发了，加载个 link 标签毛用没有。

preload 的核心原理是：浏览器在解析 HTML 时遇到 link rel="preload" 就立即发起请求。你在 useEffect 里创建，JS 都跑完了才添加，浏览器理都不理。

正确的做法取决于你的使用场景：

如果是首屏加载需要预加载，在 public/index.html 的 head 里直接写：

这招最直接，浏览器解析 HTML 时就发起请求。

如果是 React 路由切换时预加载，别用 link preload 了，直接用 fetch 提前把数据拉过来：

// 在路由切换前或组件挂载前

const preloadConfig = () => {

  fetch('/config.json', { mode: 'cors' }).then(data => {

    // 存到全局状态或缓存里

    window.__preloadedConfig = data;

  });

};



// 路由切换时调用

...

preload 设计出来就不是给你动态插入用的，那是给 HTML 解析阶段用的。你想在 JS 里"预"加载，fetch 比它靠谱多了。

至于你说 HTML 模板写了也没效果，检查一下是不是构建工具把 link 标签吞了，有些 webpack 配置会处理 link 标签。或者你放的位置不对，必须在 head 里且在所有 JS 之前。

2026-03-11 17:11

司徒倚凡 Lv1

你这个问题是因为在useEffect里preload太晚了，React组件渲染完才执行。直接把preload标签扔到public/index.html里，在里加：

这样浏览器一开始就会加载，比JS执行早多了。用create-react-app的话直接改public/index.html就行。

2026-03-10 08:13