在 react.js 中加载页面后从 googleapis 加载字体答案

【问题标题】：Load font from googleapis after page loading in react.js在 react.js 中加载页面后从 googleapis 加载字体
【发布时间】：2021-04-01 12:57:05
【问题描述】：

我与 SEO 顾问合作进行 SEO 优化和更快的页面加载。他说字体和一些 javascript 库应该在页面加载后到达。因此，该网站的加载速度会更快，但是当我在互联网上查看它时，我找不到太多。我使用 React js，对 seo 的改进一无所知。我在标题组件中按如下方式调用字体。标题组件称为关于 HeaderLayout 组件的其他嵌套组件，调用 HeaderLayout 访问其他页面的组件被称为。页面加载后有什么方法可以加载这些？

return (
    <Head>      
      <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossOrigin="anonymous"
      />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap"
      />

      <link
        rel="icon"
        type="image/x-icon"
        sizes="32x32"
        href="/icons/favico.ico"
      />
      <link rel="canonical" href={routerUrlWithoutQuery} />
      <meta name="color-scheme" content="light" />
    </Head>
  )

【问题讨论】：

标签： javascript reactjs fonts seo page-load-time

【解决方案1】：

也许您可以在 useEffect 中将它附加到头部？

例子：

useEffect(() => {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href =
    "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
  link.integrity =
    "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z";
  link.crossOrigin = "anonymous";
  document.head.appendChild(link);
}, []);

【讨论】：

嗨，这就是我想要的，这对我有用。我知道它可以在useEffect中使用，但我不知道如何在useEffect中添加代码，谢谢你的帮助，如果有其他更有效的方法，请在这里告诉我们。

【解决方案2】：

只需在<link> 中为媒体属性设置一个无效值，然后在页面加载时将其设置为全部，如下所示：

<link rel="stylesheet" href="link here" media="none" onload="if(media!='all')media='all'">

当媒体查询的计算结果为 false 时，浏览器仍会下载样式表，但不会在呈现页面之前等待内容可用。

【讨论】：

嗨，Sushmita，谢谢你的回答。我会试试看，但我想知道，你的评论对其他 bootstrap.min.css 和其他 javascript 库有效，或者还有其他方法可以为他们做到这一点?
我试过了，有时它可能是一个很好的解决方案，但是当头部组件被其他页面调用时，头部在每一帧中都会被调用，这对我来说不是一个好主意。
嗨，对于 javascript 库，Vipul 使用useEffect 的答案也可以。