如何在 Fastify 中配置 HTTP 缓存-JavaScript中文网-JavaScript教程资源分享门户

HTTP 缓存是一种优化 Web 应用程序性能的重要技术。它可以减少网络传输和服务器负载，提高用户体验。在前端开发中，我们需要对 HTTP 缓存有一定的了解，并且在应用程序中合理地使用它。本文将重点介绍如何在 Fastify 中配置 HTTP 缓存。

HTTP 缓存的工作原理

HTTP 缓存是通过存储 HTTP 响应的副本来减少对服务器的请求的。当浏览器请求一个资源时，它会先检查缓存中是否有该资源的副本。如果缓存中存在该资源的副本，并且该副本没有过期，则浏览器会直接从缓存中获取该资源，而不是向服务器发出请求。如果缓存中不存在该资源的副本，或者该副本已经过期，则浏览器会向服务器发出请求，获取最新的资源，并将它存储在缓存中。

HTTP 缓存可以分为两种类型：强缓存和协商缓存。

强缓存

强缓存是通过设置 HTTP 响应头来实现的。当浏览器请求一个资源时，如果该资源的强缓存还未过期，则服务器会直接返回该资源的副本，并将状态码设置为 200 OK。在强缓存期间，浏览器不会向服务器发出请求，而是直接从缓存中获取该资源。

强缓存可以通过设置两个 HTTP 响应头来实现：

Cache-Control：用来指定强缓存的策略。其中，max-age 指定缓存的有效时间（单位为秒），no-cache 指示浏览器需要向服务器验证缓存是否过期。
Expires：用来指定缓存过期的时间。它的值是一个 GMT 格式的时间字符串，例如 Wed, 21 Oct 2015 07:28:00 GMT。

协商缓存

协商缓存是通过设置 HTTP 请求头和响应头来实现的。当浏览器请求一个资源时，如果该资源的强缓存已经过期，则浏览器会向服务器发送一个请求，询问该资源是否有更新。服务器会根据请求头中的信息来判断资源是否有更新，如果有更新，则返回最新的资源，并将状态码设置为 200 OK；否则，返回一个空的响应，并将状态码设置为 304 Not Modified。在协商缓存期间，浏览器不会下载资源的副本，而是直接从缓存中获取该资源。

协商缓存可以通过设置两个 HTTP 请求头和两个 HTTP 响应头来实现：

请求头
- If-Modified-Since：用来指定上次请求获取资源的时间。服务器会根据该时间来判断资源是否有更新。如果资源的最后修改时间比该时间要晚，则说明资源有更新；否则，说明资源没有更新。
- If-None-Match：用来指定上次请求获取资源时服务器返回的 ETag 值。服务器会根据该值来判断资源是否有更新。如果资源的 ETag 值与该值不同，则说明资源有更新；否则，说明资源没有更新。
响应头
- Last-Modified：用来指定资源的最后修改时间。它的值是一个 GMT 格式的时间字符串。
- ETag：用来指定资源的唯一标识符。它的值通常是一个哈希值。

在 Fastify 中配置 HTTP 缓存

Fastify 是一个快速、低开销、可扩展的 Node.js Web 框架。它支持多种插件，包括用于配置 HTTP 缓存的插件。在 Fastify 中配置 HTTP 缓存非常简单，只需要安装并使用 fastify-caching 插件即可。

安装插件

可以使用 npm 命令来安装 fastify-caching 插件：

npm install fastify-caching --save

配置插件

安装插件后，可以在应用程序中使用 fastify-caching 插件来配置 HTTP 缓存。在使用插件之前，需要先引入它：

const fastify = require('fastify')()
const cachingPlugin = require('fastify-caching')

然后，在应用程序中注册插件：

fastify.register(cachingPlugin, {
  privacy: 'public',
  expiresIn: 300,
  cacheControl: 'public, max-age=300',
  etag: true
})

其中，privacy 用来指定缓存的隐私策略；expiresIn 用来指定缓存的有效时间；cacheControl 用来指定缓存的 Cache-Control 头；etag 用来指定是否使用 ETag。

示例代码

下面是一个完整的示例代码：

// javascriptcn.com 代码示例
const fastify = require('fastify')()
const cachingPlugin = require('fastify-caching')

fastify.register(cachingPlugin, {
  privacy: 'public',
  expiresIn: 300,
  cacheControl: 'public, max-age=300',
  etag: true
})

fastify.get('/', (req, reply) => {
  reply.type('text/html')
  reply.send('Hello, world!')
})

fastify.listen(3000, (err) => {
  if (err) {
    console.error(err)
    process.exit(1)
  }
  console.log('Server listening on http://localhost:3000')
})

在上面的代码中，我们使用 fastify-caching 插件来配置 HTTP 缓存。我们指定了缓存的隐私策略为 public，缓存的有效时间为 300 秒，Cache-Control 头为 public, max-age=300，并且启用了 ETag。在路由处理程序中，我们只是简单地返回了一个字符串。当浏览器请求该字符串时，它将使用上述配置来设置缓存头。

总结

HTTP 缓存是一种优化 Web 应用程序性能的重要技术。在前端开发中，我们需要对 HTTP 缓存有一定的了解，并且在应用程序中合理地使用它。在 Fastify 中配置 HTTP 缓存非常简单，只需要安装并使用 fastify-caching 插件即可。在使用插件时，需要注意缓存的隐私策略、缓存的有效时间、Cache-Control 头和 ETag 的配置。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65603a19d2f5e1655da66cb3