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

Question

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

但是我确实注意到一个问题，即在我在 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 链接元素。 React Helmet 在Gatsby tutorial 中讨论。

也可以通过 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。