在以往的开发中，我们可能会遇到一些需要展示大量数据的页面。为了减少服务器和客户端的负载，很多时候我们会对这些页面进行缓存，从而提升用户的体验。在 Angular 中，我们同样可以通过使用缓存来优化我们的页面。
什么是页面缓存
页面缓存指的是将页面中的请求结果存储在本地，当用户再次访问同一个页面时，直接从本地取出缓存，而无需重新发起请求。此方法不仅可以提升页面的加载速度，还可以减少服务器和客户端之间的流量，提高应用的响应速度。
在 Angular 中，我们可以通过使用 Service Worker 和浏览器自身的缓存机制实现页面的缓存。接下来，我们将从两个方面来介绍如何在 Angular 中实现页面缓存。
使用 Service Worker
Service Worker 是一个独立于页面的 JavaScript 线程，它可以控制页面的网络请求和响应。我们可以使用 Service Worker 来实现对页面的缓存。
首先，在 Angular 项目中，我们需要创建一个 Service Worker 文件。在 src 目录下创建一个新文件夹 sw.js，并编写以下代码：
-- -------------------- ---- -------
----- --------- - -----------
-- ------ ------- -------
-------------------------------- ----- -- -
-- ---------
----- ----------- - -
----
--------------
----------
--------------
----------------
--
----------------
----------------------
----------- -- -
------------------- --------
------ --------------------------
--
--
---
-- ----------------------------
------------------------------ ----- -- -
------------------
---------------------------
-------------- -- -
-- -------------
-- ---------- -
------ ---------
-
-- ----------------
------ --------------------
-------------- -- -
------ ----------------------
----------- -- -
------------------------ ------------------
------ ---------
---
---
--
--
---在以上代码中，我们首先定义了一个常量 cacheName 用于存储缓存的名称。在 Service Worker 的 install 事件中，我们定义了需要缓存的资源，例如 CSS 文件、JavaScript 文件、HTML 文件等。在 fetch 事件中，如果缓存存在则直接返回缓存，否则向服务器请求页面信息并进行缓存。
接下来，在 Angular 项目中引入这个 Service Worker：
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------- - ---- --------------------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- ------------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------------------- - -------- ---------------------- --
--
---------- ---
---------- --------------
--
------ ----- --------- - -在以上代码中，我们在 imports 中引入了 ServiceWorkerModule，并在 ServiceWorkerModule.register() 中传入 Service Worker 的文件路径和配置项。当应用处于产生环境时，即需要进行页面缓存时，启用 Service Worker。
使用浏览器缓存机制
还有一种方法可以实现页面缓存，即使用浏览器自身的缓存机制。浏览器会根据每个请求的 URL 来判断该请求是否需要缓存。如果需要进行缓存，则会将该请求的结果存储在本地，当下次请求时，如果 URL 相同则直接从本地缓存中取出结果，而无需重新请求。
在 Angular 中，我们可以使用 HTTP 缓存头来指定请求的缓存方式。HTTP 缓存头分为两类：
- 强缓存：浏览器直接从缓存中读取数据，不发起请求，节约了网络资源，通过设置
Cache-Control和Expires等响应头实现。 - 协商缓存：浏览器会发送请求到服务器，使用
If-Modified-Since，If-None-Match等头信息来判断缓存是否可用，如果可用返回 304 状态码，否则返回新数据，这种方式需要开启服务器验证缓存的支持。
首先，我们需要在服务器端配置缓存相关的响应头：
-- -------------------- ---- -------
-------------- - ----- -- -
-- ---
------------- ---- ----- -- -
-- ---
------------------------------ -------- ---------------
-- ----
------------------------------ --- ----------------------
--------------------- --------------------
-------
---
--在以上代码中我们对 HTTP 缓存头进行了设置，指定了强缓存和协商缓存。其中，Cache-Control指定了缓存时间，Last-Modified指定了页面最后修改时间，ETag则指定了一个唯一标识符。
接下来，在 Angular 项目中，在需要缓存的请求中设置请求头:
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- ----------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
----- - ---------
------------------- ----- ----------- - -
---------- -
----- ------- - --- -------------
---------------- ---------------
-------------------- ----- -- --- ---- -------- -----
---------------- ------------------
---
---------------------------------------- - ------- ----------------- -- -
------------------
---
-
-在以上代码中，我们在请求头中设置了强缓存和协商缓存相关的头信息。当我们再次发起相同请求时，浏览器会根据这些头信息来判断是否使用缓存。
总结
到这里我们已经介绍了 Angular 中实现页面缓存的两种方法：使用 Service Worker 和浏览器自身的缓存机制。其中，Service Worker 拥有更完善的缓存机制，但需要在服务器端支持 HTTPS 和 HTTP/2，因此其应用场景更为有限。而使用浏览器缓存机制则需注意，如果我们不加以配置，在一些特殊情况下可能会失效。
在实际开发中，我们可以根据页面的特点和应用的需求来选择采用何种缓存方式，以优化我们的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64756d55968c7c53b027f354