React w Gatsby：为什么我的字体文件有时下载两次

Question

我正在使用 Gatsby 和 React 开发一个网站。而且我发现每次刷新页面，都会加载 1.6 MB / 1.6 MB 的资源。我是网络开发的新手，所以我真的不知道这是下载很多还是只是中等数量。

但是我确实注意到一个问题，即在我在 Netlify 上部署我的网站后，字体文件被请求两次，因此它被下载两次。您可以在屏幕截图中看到请求了两个 Roboto-Light 文件。

这是我在代码库中包含字体文件的方式。

首先我设置了一个 webpack 别名 '@fonts': path.resolve(__dirname, 'src/fonts'),

然后在src/styles/fonts.js我有

import RobotoLight from '@fonts/Roboto/Roboto-Light.ttf';
export { RobotoLight};

最后在我的src/styles/GlobalStyle.js我有

import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
@font-face {
  font-family: 'Roboto';
  src: url(${fontFamilies.RobotoLight}) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}
...

所以每当我需要应用这种RobotoLight字体时，我只需将元素设置font-family为Roboto.

我不知道为什么我的字体被下载了不止一次，我不知道这种包含字体的方式是否是最佳实践。我也想知道1.6 MB / 1.6 MB resources是不是太多了。

Answer 1

在页面上加载 1.6MB 很多吗？

很难回答，因为这完全取决于上下文。对于没有任何图像的简单页面来说，这将是很多，但对于更复杂的页面来说可能很少。此外，除了页面大小之外，还值得考虑页面加载的速度。2MB 的页面可能比 500KB 的页面加载（或似乎加载）快。

字体文件被请求两次，所以它被下载两次。

从您的屏幕截图来看，情况并非如此：Roboto 出现在 2 行，但数据似乎只下载了一次 (88.3KB)。

如何在 Gatsby 中加载字体？

在 Gatsby 中添加 Google 字体的推荐方法是在 Helmet 组件中包含 Google Fonts 链接元素。在Gatsby 教程中讨论了 React Helmet 。

也可以通过 CSS 文件顶部的 CSS 导入添加字体，但是字体下载将取决于 CSS 解析，而通过 Helmet 添加的字体将立即下载。

作为参考，CSS 导入如下所示：

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

要使用 Roboto light，您需要添加字体粗细为 300 的 Roboto 版本。

<Helmet>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet"/>
</Helmet>

然后你可以在你的 CSS 中使用它：

html {
  font-family: 'Roboto', sans-serif;
  font-weight: 300; // Technically not needed if you load just one version of Roboto
}

出于性能目的，最好只加载您使用的字体。如果您还想使用 Roboto 的标准版本（字体粗细：400），您可以使用此链接：https://fonts.googleapis.com/css?family=Roboto:300,400。