在 Web 应用程序中，静态文件是指不会频繁变化的文件，例如图片、样式表和 JavaScript 文件等。这些文件一般不需要每次请求都从服务器获取，因为它们的内容不会改变。通过静态文件缓存，可以将这些文件保存在客户端或代理服务器中，从而提高 Web 应用程序的性能。本文将介绍静态文件缓存的原理、实现方式以及优化技巧。
静态文件缓存的原理
静态文件缓存的原理很简单：当客户端或代理服务器第一次请求静态文件时，服务器会将该文件发送给客户端或代理服务器，并在响应头中设置缓存控制的相关字段，例如 Cache-Control 和 Expires。这些字段告诉客户端或代理服务器，该文件可以缓存多长时间。当客户端或代理服务器再次请求该文件时，如果该文件还在缓存期内，就直接从缓存中获取，而不需要再次向服务器请求。
静态文件缓存的实现方式
静态文件缓存有两种实现方式：客户端缓存和代理服务器缓存。
客户端缓存
客户端缓存是指将静态文件保存在客户端的浏览器缓存中。在客户端缓存中，可以使用以下两个字段来设置缓存时间：
Cache-Control：该字段用来设置缓存的最大有效时间，单位为秒。例如，设置Cache-Control: max-age=86400表示该文件可以缓存 1 天。Expires：该字段用来设置缓存的过期时间，格式为 GMT 格式的日期字符串。例如，设置Expires: Wed, 21 Oct 2026 07:28:00 GMT表示该文件可以缓存到 2026 年 10 月 21 日。
客户端缓存的优点是可以减少对服务器的请求，从而提高 Web 应用程序的性能。但是，客户端缓存也存在一些缺点，例如：
- 不同的浏览器对缓存的支持程度不同，有些浏览器可能会忽略缓存控制的字段，导致缓存无效。
- 如果静态文件更新了，客户端缓存中的文件可能不是最新的版本，需要清除缓存或强制刷新页面才能获取最新的版本。
代理服务器缓存
代理服务器缓存是指将静态文件保存在代理服务器的缓存中。代理服务器缓存有以下两种实现方式：
- 反向代理服务器缓存：将静态文件保存在反向代理服务器的缓存中。反向代理服务器是位于 Web 应用程序和客户端之间的服务器，可以将客户端的请求转发给 Web 应用程序，并将 Web 应用程序的响应返回给客户端。
- CDN 缓存：将静态文件保存在 CDN（内容分发网络）的缓存中。CDN 是一种分布式的服务器系统，可以将静态文件分发到离用户最近的服务器上，从而提高文件的访问速度。
代理服务器缓存的优点是可以减少对 Web 应用程序的请求，从而减轻服务器的负载，提高 Web 应用程序的性能。但是，代理服务器缓存也存在一些缺点，例如：
- 如果代理服务器缓存中的文件过期了，需要重新向 Web 应用程序请求文件，从而增加了延迟和网络带宽的消耗。
- 如果静态文件更新了，代理服务器缓存中的文件可能不是最新的版本，需要清除缓存或强制刷新页面才能获取最新的版本。
静态文件缓存的优化技巧
为了获得更好的性能和用户体验，可以使用以下优化技巧来优化静态文件缓存：
- 使用版本号：在静态文件的 URL 中添加版本号，可以避免浏览器缓存旧版本的文件。例如，将
http://example.com/style.css改为http://example.com/style.css?v=1.0。 - 使用文件指纹：在静态文件的 URL 中添加文件指纹，可以避免浏览器缓存旧版本的文件。文件指纹可以是文件的 MD5 或 SHA1 值。例如，将
http://example.com/style.css改为http://example.com/style-2f0a0d.css。 - 设置缓存时间：根据静态文件的更新频率和重要程度，设置合适的缓存时间。对于不经常更新的文件，可以设置较长的缓存时间，例如一年。对于经常更新的文件，可以设置较短的缓存时间，例如一小时。
- 使用缓存插件：如果使用 WordPress、Drupal 或 Joomla 等 CMS（内容管理系统），可以使用缓存插件来自动优化静态文件缓存。
- 使用 CDN：使用 CDN 可以将静态文件分发到离用户最近的服务器上，从而提高文件的访问速度。
示例代码
以下是使用 Node.js 和 Express 实现静态文件缓存的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- -------- -------------------------------- - ------- ----- -- ------- ---- ---------------- -- -- - ---------------- --------- -- ---- -------- ---
在上面的示例代码中，使用了 Express 的 express.static 中间件来设置静态文件目录，并设置了缓存时间为一天。如果需要使用更多的缓存控制选项，可以使用 serve-static 模块。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3eb9fa941bf713476dbe7