如果你正在开发前端应用，那么你可能会遇到一些性能问题。例如，当用户向后端服务器发出请求时，如果该请求已经处理过一次，那么再次重复相同的请求，就会造成资源的浪费和服务器的负担。这时候使用缓存就可以有效地解决这些问题。
针对这个问题，我们可以使用 npm 包 cacheable-middleware，它是一个中间件，可以帮助我们在前端应用中实现缓存。在本篇文章中，我们将会详细介绍 cacheable-middleware 的使用方法和示例代码。
cacheable-middleware 简介
cacheable-middleware 是一个适用于 Node.js 的轻量级缓存中间件。该中间件支持基于缓存键的缓存策略，支持使用多种存储后端（比如内存、Redis、Memcached 等），并能够支持基于 URL 的缓存。
cacheable-middleware 可以在 Node.js 的 HTTP 服务器中使用，可以被用于缓存 GET/HEAD 请求的响应结果。该中间件采用了一种先检查后处理的方式，即在请求到来时，先去缓存中查询是否有可用的响应结果，如果有结果则直接返回并绕过后端的处理。如果缓存中没有结果，那么就去后端获取响应结果并缓存起来，再返回响应结果。
cacheable-middleware 的使用方法
在我们开始使用 cacheable-middleware 之前，我们需要先将其安装到我们的项目依赖中。使用 npm 命令即可完成：
npm install cacheable-middleware --save
安装完成之后，我们就可以在 Node.js 的 HTTP 服务器中使用它了。下面是一个示例代码，我们可以将其添加到我们的 HTTP 服务器中，从而实现对 GET/HEAD 请求的响应缓存：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------------------------
----- ------- - -
---- --- -- -----------
-------- ----- -- ------
------- --------- -- -----
------ - -- ---------
------- --------- -- -----------
-------- -- -- ---------
-
--
----- -------------- - ----- ---- -- -
------------------ - --------------- ------------ ---
-------------- ---------
--
----- ------ - ------------------------------------- ----------------
------------------- -- -- -
------------------- --------- -- ------------------------
---上述代码中，我们首先定义了 cacheable-middleware 的配置项 options，其中涵盖了缓存的相关参数，如缓存失效时间、是否开启缓存、缓存键前缀、缓存存储引擎等配置。随后，我们定义了 HTTP 服务器的请求处理函数 requestHandler，并将其传入 createServer 方法中，最终创建了一个 HTTP 服务器实例 server。
在这段代码中，我们通过 cacheable(options) 将 cacheable-middleware 加入到了 HTTP 服务器的中间件流中，当请求到达 HTTP 服务器时，cacheable-middleware 将会通过缓存查询来判断该请求是否已有响应结果，如果有，那么就直接返回响应结果。
cacheable-middleware 示例
下面是一个完整的 cacheable-middleware 示例代码，其中包含了如何使用基于 Memory 存储引擎的缓存和 Redis 存储引擎的缓存：
使用 Memory 存储引擎
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------------------------
----- ------- - -
---- --- -- -----------
-------- ----- -- ------
------- --------- -- -----
------ - -- ---------
------- --------- -- -- ------ ----
-------- -- -- ------ --------------
-
--
----- -------------- - ----- ---- -- -
------------------ - --------------- ------------ ---
-------------- ---------
--
----- ------ - ------------------------------------- ----------------
------------------- -- -- -
------------------- --------- -- ------------------------
---在这个示例中，我们以 Memory 存储引擎作为缓存存储后端，这种方式是最简单的一种。我们只需要将 cache.engine 设置为 memory 即可。此处的缓存策略是基于 URL 的缓存，而缓存的键是根据 URL、请求参数、请求头等信息生成的。
使用 Redis 存储引擎
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------------------------
----- ----- - -----------------
----- ------ - ---------------------
----- ------- - -
---- --- -- -----------
-------- ----- -- ------
------- --------- -- -----
------ - -- ---------
------- -------- -- -- ----- ----
-------- -
------- -- ----- -----
---- -- -- -----------
-
-
--
----- -------------- - ----- ---- -- -
------------------ - --------------- ------------ ---
-------------- ---------
--
----- ------ - ------------------------------------- ----------------
------------------- -- -- -
------------------- --------- -- ------------------------
---在这个示例中，我们以 Redis 存储引擎作为缓存存储后端。首先，我们需要使用 npm 命令安装 redis 包，然后通过 redis.createClient() 创建一个 Redis 客户端对象 client，将其传递给 cacheable-middleware，这样就可以使用 Redis 存储引擎来缓存请求结果了。
经验总结
本文介绍了使用 npm 包 cacheable-middleware 来实现前端缓存的方法。cacheable-middleware 是一个简单易用、功能强大的中间件，它支持多种缓存存储引擎和缓存策略，适用于多种前端场景。
在使用 cacheable-middleware 时，我们需要考虑缓存的失效时间、缓存键前缀、缓存存储引擎等因素，选取合适的参数对于提高性能、减少服务器负担非常有帮助。在实际应用中，我们可以根据自己的需求来选择合适的缓存策略和存储引擎，从而充分发挥 cacheable-middleware 的优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde575b