동일한 매개변수로 한 번 처리된 대규모 자바스크립트 함수의 재실행을 방지합니다.

기억하다

동일한 매개변수로 실행되는 기능에 대한 캐시 메커니즘(메모이저)(단 1.14KB)

이 프로젝트는 비용이 많이 드는 함수 호출의 결과를 캐시하여 JavaScript 또는 TypeScript 프로젝트의 성능을 향상시키기 위한 메모 기능을 제공합니다. 메모를 하면 동일한 인수로 반복 호출하면 캐시된 결과가 반환되므로 실행 속도가 빨라집니다.

이 모듈은 React의 useMemo 후크처럼 작동하지만 필수 React는 아닙니다. 모든 프레임워크나 순수 자바스크립트 프로젝트를 사용할 수 있습니다

Npm 패키지
깃허브

특징

• 함수 메모: 동일한 인수를 사용하여 함수 호출 결과를 캐시합니다.
• 종속성 추적: 종속성이 변경되면 캐시를 업데이트합니다.
• 유연성: JavaScript와 TypeScript 프로젝트 모두에서 사용 가능
• CPU 집약적인 작업이나 복잡한 계산을 위한 최고의 솔루션
• 연결이 끊어진 기능은 메모리에서 삭제됩니다. 이 기능에 속한 캐시도 삭제됩니다.
• WeakMap 기반 캐시 저장소
• WeakMap 약한 참조 링크와 통신할 수 없는 메서드의 연결을 끊고 가비지 수집기가 시작되도록 트리거합니다

사용 사례

Deps 매개변수 없음

다음 과정에서는 동일한 매개변수로 concatPhoneNumber 메소드를 다시 호출하면 함수가 다시 실행되지 않고 캐시에서 결과를 가져옵니다.

import memofy from "memofy";

const concatPhoneNumber = (extension, number) => {
  // Heavy calculation
  // return result
};

const memoizedConcatPhoneNumber = memofy(concatPhoneNumber, []);

memoizedConcatPhoneNumber(90, 555); // Runs concatPhoneNumber when first run
memoizedConcatPhoneNumber(90, 555); // get value from cache

memoizedConcatPhoneNumber(90, 552); // Runs concatPhoneNumber because params is change

deps 매개변수 사용

일부 종속성에 따라 동일한 매개변수로 메소드를 다시 실행하려면 다음과 같이 deps 매개변수를 전달하면 됩니다.

import memofy from "memofy";

const taxRatio = 0.5;
const product = { title: "Test product", price: 10 };

const calculateTax = () => {
  // Calculate tax by product price
  // Heavy calculation
  return taxRatio * product.price;
};

const memoizedConcatPhoneNumber = memofy(calculateTax, [product, taxRatio]);

calculatedPrice = calculateTax(); // Runs concatPhoneNumber when first run

product.price = 40;
let calculatedPrice = calculateTax(); // Runs concatPhoneNumber because product dep changed

taxRatio = 0.8;
calculatedPrice = calculateTax(); // Runs concatPhoneNumber because taxRatio changed

실적결과

소수를 구별하는 복잡한 함수의 성능 결과입니다. 성능 테스트

Case	ms
First execute time (no caching)	> 52.08 ms
Second execute time (caching)	< 0.03 ms
and subsequent execution (caching)	< 0.03 ms

테스트 커버리지 결과

모든 경우와 모든 매개변수 유형에 대해 테스트가 작성되었습니다. 테스트

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	100	100	100	100	0
lib	100	100	100	100	0
index.ts	100	100	100	100	0
lib/store	100	100	100	100	0
CacheStore.ts	100	100	100	100	0
DepsStore.ts	100	100	100	100	0

위 내용은 동일한 매개변수로 한 번 처리된 대규모 자바스크립트 함수의 재실행을 방지합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!