Early Hints 能在 React 应用里提前加载关键资源吗？

爱学习的玉惠提问于 2026-03-27 14:06:22 阅读 27

优化

我最近看到 Early Hints（103 状态码）可以提前推送关键资源，比如 CSS 或字体。但在 React SPA 项目里试了下，发现浏览器好像没反应，不知道是不是用法不对？

我的服务端已经配置了返回 Early Hints，但前端代码是这样的：

import React from 'react';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <link rel="preload" href="/critical.css" as="style" />
    </div>
  );
}

export default App;

这样写在组件里加 <link> 标签能配合 Early Hints 提前加载吗？还是说必须由服务端直接输出 HTML 头部才行？

我来解答赞 5 收藏

反馈

1 条解答

Newb.卫华 Lv1

在性能上，Early Hints确实可以提前加载关键资源，但你现在的做法有些问题。Early Hints需要服务端主动推送，不是简单的在React组件里加标签就能配合的。

首先得确保服务器正确配置了103状态码并推送资源。然后，在React应用里，想让Early Hints生效，最好是在HTML模板层面就处理好。你可以把放到index.html的部分，而不是在React组件里写。

比如你的index.html头部应该是这样：

<head>

  <link rel="preload" href="/critical.css" as="style">

</head>

另外，别忘了检查浏览器支持情况和网络请求头是否正确设置。我之前折腾这个也踩了不少坑，服务端和前端细节都得注意，不然这性能优化就白搞了。

2026-03-27 14:09