http-front-cache를 사용하여 프런트엔드 앱 성능 향상

최신 프런트엔드 애플리케이션에서 성능은 사용자 경험의 핵심 요소입니다. 성능을 향상시키는 효과적인 방법은 서비스 결과(HTTP 요청) 기능을 캐시하여 중복된 네트워크 요청 및 계산을 줄이는 것입니다.

이 기사에서는 간단하고 효율적인 프런트 엔드 캐싱 방법을 제공하는 http-front-cache 유틸리티를 살펴보겠습니다. 그런데 오픈소스인가요?

http-front-cache이란 무엇인가요?

http-front-cache은 서비스 기능의 결과를 브라우저에 캐싱하는 유틸리티입니다. 그러나 이 유틸리티를 주의해서 사용하고 특정 제한 사항을 준수하는 것이 중요합니다.

1. 캐시할 데이터가 너무 커서는 안 됩니다.
2. 데이터에는 민감한 정보가 포함되어서는 안 됩니다.
3. 데이터가 너무 자주 변경되어서는 안 됩니다.
4. 서비스 매개변수는 너무 자주 변경되어서는 안 됩니다(너무 자주 변경되면 캐시가 사용되지 않습니다).

기본적으로 http-front-cache는 두 가지 도우미 기능을 제공합니다.

cacheFactory: 데이터를 캐시하기 위해 공급자(캐시가 저장되는 위치)를 허용하는 확장 가능한 캐시 팩토리 기능입니다. 이를 통해 캐싱 메커니즘을 확장하고 localStorage, sessionStorage, IndexedDB, cookie, 메모리 등과 같이 필요한 곳에 캐시를 저장할 수 있습니다.

cacheOnSessionStorage: cacheOnSessionStorage은 cacheFactory을 가져와 sessionStorage을 공급자로 정의하는 캐시 가능하고 즉시 사용 가능한 함수입니다. cacheFactory 기능의 예시입니다. cacheOnSessionStorage은 sessionStorage이 프런트엔드에서 가장 일반적으로 사용되는 캐시 데이터 제공자 중 하나이기 때문에 만들어졌습니다.

설치

http-front-cache을 시작하려면 npm을 통해 설치할 수 있습니다.

<code class="language-bash">npm i @openish-u/http-front-cache</code>

사용방법 http-front-cache

사용 방법에는 두 가지가 있다는 것을 눈치채셨을 것입니다. http-front-cache:

1) cacheOnSessionStorage

사용

<code class="language-javascript">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 返回的数据
});

// 导出 cachedFetchData 并根据需要使用</code>

이 예에서는 API에서 데이터를 가져오는 서비스 함수fetchData를 정의합니다. 그런 다음 cacheOnSessionStorage을 사용하여 이 함수의 결과를 5분 동안 캐시합니다. cachedFetchData이 호출되면 네트워크 요청을 하기 전에 캐시를 확인합니다.

---

이 기사가 마음에 드시나요? 그렇다면 ❤️을 좋아하고 저를 팔로우하여 최신 소식을 받는 것을 잊지 마세요. 앞으로도 비슷한 콘텐츠를 더 많이 만들어보겠습니다

---

2) 사용자 정의 공급자 확장 사용 http-front-cache

<code class="language-bash">npm i @openish-u/http-front-cache</code>

이 예에서는 getItem, setItem 및 removeItem 메소드를 사용하여 사용자 정의 공급자를 정의합니다. 그런 다음 cacheFactory을 사용하여 사용자 정의 공급자를 사용하는 캐시 기능을 만듭니다. 필요한 데이터를 캐시할 수도 있습니다. XP

커피 한잔 사주세요 lf. 제 도움이 도움이 되기를 바랍니다. ?

결론

http-front-cache은 서비스 기능의 결과를 캐시하여 웹 애플리케이션의 성능을 향상시키는 데 도움이 되는 강력한 유틸리티입니다.

자세한 내용과 최신 업데이트를 알아보려면 GitHub에서 전체 문서를 확인하세요.

다른 기사도 확인해보세요

위 내용은 http-front-cache를 사용하여 프런트엔드 앱 성능 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!