如何将 js、css 从 Gatsby 保存到缓存中？

Question

我有一些来自 node_modules 的文件，它们需要保存在缓存中，因为我正在获取这些信息

enter image description here

为了获得我使用 Lighthouse 审核的这些信息，这是网络 https://www.webpagetest.org/

这是最终结果，“缓存静态内容”是错误 enter image description here

我正在与 Gatsby 合作，我找到了有关我的问题的信息https://www.gatsbyjs.com/docs/caching/#javascript-and-css，但我不确定如何使用它或者我应该使用其他库吗？我不知道如何缓存

我认为我应该使用这些属性：

The cache-control header should be cache-control: public, max-age=31536000, immutable

这是我的文件 gatsby-config

plugins: [
    'gatsby-plugin-top-layout',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'assets',
        path: `${__dirname}/src/assets`,
      },
    },
    `gatsby-plugin-image`,
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        
      },
    },
    {
      resolve: `gatsby-plugin-offline`,
      options: {
        precachePages: ['/projects/'],
      },
    },
    {
      resolve: 'gatsby-plugin-material-ui',

我这样做的目的是解决这个问题，当我重新加载 Web 应用程序时会有一个空格

blank space

Answer 1

Gatsby 生成静态内容。它不处理发送 HTTP 响应。这将是一个 Web 服务器（或者在你的情况下是 firebase）。

查看有关在 firebase 上发送标头的文档 https://firebase.google.com/docs/hosting/full-config#headers

你需要这样的东西：

"hosting": {
  "headers": [ {
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [ {
      "key": "cache-control",
      "value": "public, max-age=31536000, immutable"
    } ]
  } ]
}

这会缓存通常是安全的字体文件，因为字体很少更改。

如果您愿意，也可以将js 和css 添加到该列表中。请记住，您需要更改 js 和 css 文件的名称，否则浏览器将等待 1 年才能重新加载它们。