在現(xiàn)代前端應(yīng)用中，性能是用戶體驗的關(guān)鍵因素。提升性能的一個有效方法是緩存服務(wù)（HTTP 請求）函數(shù)的結(jié)果，從而減少冗余的網(wǎng)絡(luò)請求和計算。

本文將探討 http-front-cache 實用程序，它提供了一種簡單高效的前端緩存方法。順便一提，它是開源的 ?

什么是 http-front-cache？

http-front-cache 是一款用于緩存瀏覽器中服務(wù)函數(shù)結(jié)果的實用程序。但是，務(wù)必謹(jǐn)慎使用此實用程序并遵守某些限制：

1. 要緩存的數(shù)據(jù)不宜過大。
2. 數(shù)據(jù)不應(yīng)包含敏感信息。
3. 數(shù)據(jù)不應(yīng)過于頻繁地更改。
4. 服務(wù)參數(shù)不應(yīng)過于頻繁地更改（如果過于頻繁更改，則不會使用緩存）。

默認(rèn)情況下，http-front-cache 提供兩個輔助函數(shù)：

cacheFactory：一個可擴(kuò)展的緩存工廠函數(shù)，它接受一個提供程序（保存緩存的位置）來緩存數(shù)據(jù)。這允許您擴(kuò)展緩存機(jī)制，并將緩存保存到任何需要的地方，例如 localStorage、sessionStorage、IndexedDB、cookie、內(nèi)存等等。

cacheOnSessionStorage：cacheOnSessionStorage 是一個可緩存的即用型函數(shù)，它使用 cacheFactory 并將 sessionStorage 定義為提供程序。它是 cacheFactory 功能的一個示例。cacheOnSessionStorage 的創(chuàng)建是因為 sessionStorage 是前端最常用的緩存數(shù)據(jù)提供程序之一。

安裝

要開始使用 http-front-cache，您可以通過 npm 安裝它：

npm i @openish-u/http-front-cache

如何使用 http-front-cache

您可能已經(jīng)注意到，使用 http-front-cache 有兩種方法：

1) 使用 cacheOnSessionStorage

import { cacheOnSessionStorage } from 'utility-http-front-cache';

type Params = string;
type Result = { data: string[] };

const fetchData: ServiceFunction = async (param: string) => {
  const response = await fetch(`https://dev.to/api/articles?${param}`);
  return response.json();
};

const cachedFetchData = cacheOnSessionStorage(fetchData, 5 * 60 * 1000); // 緩存 5 分鐘

// 使用
cachedFetchData('exampleParam').then((result) => {
  console.log(result); // result 是 fetchData 返回的數(shù)據(jù)
});

// 導(dǎo)出 cachedFetchData 并根據(jù)需要使用

在此示例中，我們定義了一個服務(wù)函數(shù) fetchData，它從 API 獲取數(shù)據(jù)。然后，我們使用 cacheOnSessionStorage 將此函數(shù)的結(jié)果緩存 5 分鐘。調(diào)用 cachedFetchData 時，它會在發(fā)出網(wǎng)絡(luò)請求之前先檢查緩存。

喜歡這篇文章嗎？如果是，別忘了點贊 ?? 并關(guān)注我以保持更新。我會繼續(xù)創(chuàng)作更多類似的內(nèi)容

2) 使用自定義提供程序擴(kuò)展 http-front-cache

npm i @openish-u/http-front-cache

在此示例中，我們使用 getItem、setItem 和 removeItem 方法定義了一個自定義提供程序。然后，我們使用 cacheFactory 創(chuàng)建一個使用自定義提供程序的緩存函數(shù)。同樣可以緩存您需要的數(shù)據(jù)。xP

請我喝杯咖啡 ?。希望我的幫助對您有所幫助。?

結(jié)論

http-front-cache 是一款功能強(qiáng)大的實用程序，可以通過緩存服務(wù)函數(shù)的結(jié)果來幫助您提升 Web 應(yīng)用程序的性能。

有關(guān)更多信息和最新更新，請查看 GitHub 上的完整文檔。

查看我的其他文章

以上是使用 http-front-cache 提升前端應(yīng)用程序性能的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！