Mémo de fonction pour chaque framework

mémoriser ? - Mémoisation légère pour les fonctions JavaScript (1,3 Ko)

Mécanisme de cache (memoizer) pour les fonctions exécutées avec les mêmes paramètres (seulement 1,3 Ko)

Ce projet fournit une fonction de mémorisation pour améliorer les performances des projets JavaScript ou TypeScript en mettant en cache les résultats d'appels de fonctions coûteux. En mémorisant, les appels répétés avec les mêmes arguments renverront le résultat mis en cache, accélérant ainsi l'exécution.

Ce module fonctionne comme le hook useMemo de React, mais il n'est PAS nécessaire de réagir. Vous pouvez utiliser n'importe quel framework ou projets javascript purs

Caractéristiques

• Mémoisation de fonction : met en cache les résultats des appels de fonction avec les mêmes arguments.
• Suivi des dépendances : met à jour le cache si les dépendances changent.
• Flexibilité : utilisable dans les projets JavaScript et TypeScript.
• La meilleure solution pour les opérations gourmandes en CPU ou les calculs complexes
• Les fonctions déconnectées sont supprimées de la mémoire. Les caches appartenant à cette fonction sont également supprimés.
• Magasin de cache basé sur WeakMap
• WeakMap déconnecte les méthodes qui ne peuvent pas communiquer avec des liens de référence faibles et déclenche l'intervention du garbage collector

Pourquoi devrions-nous utiliser memofy ?

En utilisant Memofy vous pouvez réduire le temps d'exécution de vos fonctions jusqu'à 1500 fois. Les résultats suivants ont été obtenus en testant sur une fonction lourde. ??

Scénario de test Temps d'exécution de la fonction (ms) ête>

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

Avec Memofy (CACHÉ) 0,083 ms

Sans Memofy

57,571 ms

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

ET très facile

Installation

npm install memofy

MNP

yarn add memofy

FIL

Cas d'utilisation

Sans paramètres deps

Dans le processus suivant, lorsque la méthode concatPhoneNumber est à nouveau appelée avec les mêmes paramètres, la fonction n'est pas réexécutée, elle récupère le résultat du cache.

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

Avec paramètre deps

Si vous souhaitez que la méthode s'exécute à nouveau avec le même paramètre selon certaines dépendances, vous pouvez passer le paramètre deps comme suit.

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

Avec contexte

Si le contexte (ceci, globalContex par exemple) est utilisé dans la fonction que vous souhaitez mettre en cache, vous pouvez transmettre le paramètre de contexte.

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<any>>;

type MemoizedFunction<A extends Args, ReturnType> = (...args: A) => ReturnType;

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

Déclaration pour dactylographie

Résultat des performances

Résultats de performances sur une fonction complexe qui distingue les nombres premiers. Test de performances

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

Résultat de couverture du test

Des tests ont été écrits pour tous les cas et tous les types de paramètres. Essais

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

Contribuer

Il s'agit d'un logiciel open source. Si vous le souhaitez, vous pouvez le soutenir en devenant contributeur.Github Repository

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!