あらゆるフレームワークの関数メモマイザー

メモフィ？ - JavaScript 関数の軽量メモ化 (1.3KB)

同じパラメータで実行される関数のキャッシュ機構(メモライザー) (わずか1.3 KB)

このプロジェクトは、負荷の高い関数呼び出しの結果をキャッシュすることで、JavaScript または TypeScript プロジェクトのパフォーマンスを向上させるためのメモ化関数を提供します。メモ化することで、同じ引数で繰り返し呼び出しを行うと、キャッシュされた結果が返され、実行が高速化されます。

このモジュールは、react の useMemo フックのように機能しますが、react は必要ありません。任意のフレームワークまたは純粋な JavaScript プロジェクトを使用できます

特徴

• 関数のメモ化: 同じ引数を使用した関数呼び出しの結果をキャッシュします。
• 依存関係の追跡: 依存関係が変更された場合にキャッシュを更新します。
• 柔軟性: JavaScript プロジェクトと TypeScript プロジェクトの両方で使用可能。
• CPU 負荷の高い操作や複雑な計算に最適なソリューション
• 切断された機能はメモリから削除されます。この関数に属するキャッシュも削除されます。
• WeakMap ベースのキャッシュ ストア
• WeakMap 弱い参照リンクと通信できないメソッドを切断し、ガベージ コレクターの起動をトリガーします

なぜmemofyを使用する必要があるのでしょうか?

Memofy を使用すると、関数の実行時間を最大 1500 分の 1 に短縮できます。以下の結果は、重い関数でテストした結果得られました。 ??

テストケース 関数の実行時間 (ミリ秒)

Test Case	Function Execute Time (ms)
With Memofy (CACHED)	0.083 ms
Without Memofy	57.571 ms

Memofy あり (キャッシュ済み) 0.083 ミリ秒

Memofy なし

57.571 ミリ秒

import memofy from "memofy";

const dep1 = /** Variable to track change */

const heavyMethod = memofy((arg1, arg2, ...args) => {
 // calculate something then return
}, [dep1, dep2, ...deps]);

// heavyMethod looks at the deps and arguments every time it is called.
// If there is no change, it brings it from the cache. If there is a change, it runs the function again

しかもとても簡単です

インストール

npm install memofy

故宮

yarn add memofy

糸

使用例

depsパラメータなし

次のプロセスでは、同じパラメータで concatPhoneNumber メソッドが再度呼び出された場合、関数は再度実行されず、結果がキャッシュから取得されます。

import memofy from "memofy";

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

const memoizedConcatPhoneNumber = memofy(concatPhoneNumber, []);

memoizedConcatPhoneNumber(90, 555); // Runs concatPhoneNumber once
memoizedConcatPhoneNumber(90, 555); // Don't run because fetched from cache (same parameter)
memoizedConcatPhoneNumber(90, 552); // Runs concatPhoneNumber because params is changed

depsパラメータあり

依存関係に従って同じパラメータを使用してメソッドを再度実行する場合は、次のように deps パラメータを渡すことができます。

import memofy from "memofy";

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

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

const memoizedCalculateTax = memofy(calculateTax, [product]);

calculateTax(2); // Runs calculateTax when first run -> 20
calculateTax(2); // // Don't run because fetched from cache (same parameter and same deps) -> 20

product.price = 40;
calculateTax(3); // Runs calculateTax because product dep changed -> 120

import memofy from "memofy";

const products = [
  /**Let's say there are more than 100 products */
];

// It is costly to cycle through 100 products each time. Just keep the result in the cache when it runs once.
const getTotalPrice = (fixPrice) => {
  return products.reduce((acc, curr) => acc + curr.price, 0);
};

const _getTotalPrice = memofy(getTotalPrice, [products]);
getTotalPrice(0); // Runs getTotalPrice once
getTotalPrice(0); // Don't run because fetched from cache
products.push({
  /** a few products */
});
getTotalPrice(2); // Runs again getTotalPrice because products and parameter changed

コンテキストあり

キャッシュしたい関数で context(this、globalContex など) が使用されている場合は、context パラメータを渡すことができます。

import memofy from "memofy";

this.user.name = "Jack"; // For example inject name to context

const getName = (suffix) => {
  return `${suffix} ${this.user.name}`;
};
const memoizedGetName = memofy(getName, [], this);
memoizedGetName("Mr"); // Result is Mr Jack

this.user.name = "John";
memoizedGetName("Mr"); // Result is Mr John because context data changed

type Args = Array<any>;

type Deps = Readonly<array>>;

type MemoizedFunction<a extends args returntype> = (...args: A) => ReturnType;

declare function memofy</a><a extends args returntype any>(
  _functionToMemoize: (...args: Array<unknown>) => ReturnType,
  _deps?: Deps,
  _context?: unknown
): MemoizedFunction<a returntype>;
</a></unknown></a></array></any>

タイプスクリプトの宣言

演奏結果

素数を区別する複雑な関数のパフォーマンス結果。パフォーマンステスト

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

テストカバレッジ結果

テストはすべてのケースとすべてのパラメーター タイプに対して作成されました。テスト

File	% Stmts	% Branch	% Funcs	% Lines
All files	90.69	86.95	100	94.59
lib	88.88	92.3	100	87.5
index.ts	88.88	92.3	100	87.5
lib/store	92	80	100	100
DependencyCacheStore.ts.ts	90	75	100	100
FunctionCacheStore.ts	93.33	83.33	100	100

貢献する

これはオープンソース ソフトウェアです。必要に応じて、コントリビューターになることでサポートできます。 Github リポジトリ

以上があらゆるフレームワークの関数メモマイザーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。