es-toolkit, une alternative à Lodash

Écrit par Rishi Purwar✏️

Si vous créez des applications JavaScript depuis un certain temps, vous avez probablement utilisé des bibliothèques d'utilitaires comme Lodash. Ces bibliothèques regorgent de fonctions utiles qui rendent le codage en JavaScript plus facile et plus efficace. Mais à mesure que votre projet se développe et que vous commencez à utiliser davantage de fonctions utilitaires, vous remarquerez peut-être que la taille de votre bundle commence également à augmenter.

Cela est particulièrement vrai lorsque vous comptez sur des bibliothèques lourdes comme Lodash, ce qui vous amène à vous demander s'il existe une meilleure alternative.

C'est là qu'intervient es-toolkit : une bibliothèque d'utilitaires JavaScript moderne et performante, légère et dotée d'un solide support TypeScript, ce qui en fait une excellente alternative aux bibliothèques populaires comme Lodash.

Voici les principales comparaisons entre es-toolkit et Lodash :

• es-toolkit propose des fonctions utilitaires clés similaires à Lodash, couvrant des domaines tels que les fonctions, les tableaux, les objets, les chaînes, les mathématiques, les prédicats et les promesses
• Les fonctions d'es-toolkit sont souvent plus rapides que celles de Lodash car elles utilisent des API JavaScript modernes dans leurs implémentations et TypeScript pour la vérification de type, réduisant ainsi le besoin de code défensif supplémentaire.
• Les benchmarks de performances montrent que les fonctions d'es-toolkit surpassent leurs équivalents Lodash, parfois avec des marges significatives
• Les fonctions d'es-toolkit ont des tailles de bundle nettement plus petites par rapport aux équivalents de Lodash, ce qui entraîne des temps de chargement plus rapides et de meilleures performances
• es-toolkit répond aux problèmes de performances et de taille des bundles en exploitant les fonctionnalités JavaScript modernes et en évitant les interdépendances trouvées dans Lodash
• Les fonctions d'es-toolkit sont pour la plupart autonomes, empêchant l'inclusion involontaire de code inutile, contrairement à Lodash où les fonctions utilitaires sont souvent interdépendantes

Entrons dans le vif du sujet de ces différences et voyons comment vous pouvez utiliser es-toolkit dans vos projets JavaScript.

Principales fonctionnalités de la boîte à outils es

Voici un aperçu rapide de ce que es-toolkit apporte à la table :

• Fonctions incluant memoize pour mettre en cache les résultats des fonctions et anti-rebond pour limiter la fréquence d'appel d'une fonction
• Des tableaux comme uniq pour filtrer les doublons et les différences pour trouver ce qui est différent entre les tableaux
• Des outils de gestion des objets JavaScript, tels que cloneDeep pour le clonage profond et flattenObject pour transformer des objets imbriqués en une structure plate
• Outils de manipulation de chaînes, notamment kebabCase pour convertir les chaînes en kebab-case
• Les aides mathématiques comme random pour générer des nombres aléatoires et round pour les arrondir
• Tapez des fonctions de garde comme isNil pour vérifier facilement les valeurs nulles ou non définies
• Utilitaires pour travailler avec du code asynchrone, comme retarder pour suspendre un peu l'exécution

Comparaison des performances et de la taille du bundle

Pour vraiment comprendre les avantages d'es-toolkit, comparons ses performances et la taille de son bundle à celles de Lodash.

Performance

Les fonctions d'es-toolkit sont souvent plus rapides que celles de Lodash car elles utilisent des API JavaScript modernes dans leurs implémentations. Par exemple, la fonction omit d’es-toolkit est environ 11,8 fois plus rapide que la fonction omit de lodash.

Voici un tableau comparant les performances d'es-toolkit et de lodash-es pour diverses fonctions :

Function	es-toolkit@0.0.1	lodash-es@4.17.21	Difference
omit	4,767,360 times	403,624 times	11.8×
pick	9,121,839 times	2,663,072 times	3.43×
differenceWith	9,291,897 times	4,275,222 times	2.17×
difference	10,436,101 times	5,155,631 times	2.02×
intersectionWith	8,074,722 times	3,814,479 times	2.12×
intersection	9,999,571 times	4,630,316 times	2.15×
unionBy	6,435,983 times	3,794,899 times	1.69×
union	5,059,209 times	4,771,400 times	1.06×
dropRightWhile	7,529,559 times	5,606,439 times	1.34×
groupBy	5,000,235 times	5,206,286 times	0.96×

Taille du paquet

En ce qui concerne la taille du bundle, es-toolkit brille vraiment. Une taille de bundle plus petite signifie que vos applications Web se chargeront plus rapidement et fonctionneront mieux, en particulier sur les réseaux plus lents.

Voici une comparaison des tailles de bundles pour certaines fonctions courantes dans es-toolkit et lodash-es :

Function	es-toolkit@0.0.1	lodash-es@4.17.21	Difference
sample	88 bytes	2,000 bytes	-95.6 percent
difference	91 bytes	3,190 bytes	-97.2 percent
sum	152 bytes	413 bytes	-63.2 percent
debounce	144 bytes	1,400 bytes	-89.7 percent
throttle	110 bytes	1,460 bytes	-92.5 percent
pick	657 bytes	3,860 bytes	-83.0 percent
zip	797 bytes	1,790 bytes	-55.5 percent

Les fonctions d'es-toolkit sont beaucoup plus petites que celles de leurs homologues Lodash. Par exemple, l'exemple de fonction dans es-toolkit ne fait que 88 octets, alors que la même fonction dans Lodash fait 2 000 octets, soit près de 96 % plus petite !

Utilisation d'es-toolkit dans une application JavaScript

Examinons quelques exemples pour voir à quel point il est facile d'utiliser es-toolkit dans une application JavaScript. Dans cette section, nous explorerons comment es-toolkit gère les tâches courantes telles que l'anti-rebond, la limitation, la sélection de propriétés spécifiques à partir d'objets et la suppression des doublons d'un tableau.

Et devinez quoi ? Pour rendre les choses encore plus faciles, j'ai mis en place un référentiel de code de démarrage sur GitHub que vous pouvez cloner et commencer à expérimenter immédiatement. Vous trouverez le code HTML et CSS de tous les exemples que nous aborderons, ainsi que tout ce dont vous avez besoin pour commencer. Consultez le dépôt ici et suivez-le.

Exemple de rebond

Disons que vous créez une fonction de recherche pour un site Web où les utilisateurs peuvent rechercher des informations sur différents sujets.

Vous souhaitez récupérer des données au fur et à mesure que l'utilisateur tape, mais sans envoyer de requête pour chaque frappe ; sinon, vous risquez d'inonder l'API avec trop d'appels. C’est là que la fonction anti-rebond d’es-toolkit s’avère utile.

Voici comment cela fonctionne :

import { debounce } from "es-toolkit";

// a function that simulates an API call
function fetchData(query) {
  console.log(`Fetching data for: ${query}`);
}

// Using es-toolkit debounce function
const debouncedFetchData = debounce(fetchData, 1000);

document.getElementById("search-input").addEventListener("input", (event) => {
    const query = event.target.value;
    debouncedSearch(query);
});

Dans la démo ci-dessous, même si j'ai tapé cinq lettres, la fonction fetchData n'est appelée qu'après avoir arrêté de taper pendant une seconde.

De cette façon, nous pouvons éviter de faire des requêtes API inutiles à chaque pression de touche en utilisant la fonction anti-rebond.
 

Exemple d'accélérateur

Supposons que vous ayez un bouton sur votre page Web qui charge plus de publications lorsque vous cliquez dessus. Pour éviter plusieurs appels d'API si le bouton est cliqué trop rapidement, vous pouvez utiliser la fonction throttle d'es-toolkit. Cela garantit que l'appel API se produit uniquement à des intervalles définis, même si le bouton est cliqué plusieurs fois.

Voici comment vous pouvez l'utiliser :

// Throttle Example
import { throttle } from "es-toolkit";

// Function to fetch posts from an API
async function fetchPosts() {
  console.log("Fetching new posts...");
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  console.log("Posts fetched:", posts);
}
// Create a throttled version of fetchPosts
const throttledFetchPosts = throttle(fetchPosts, 2000);

// Set up an event listener on the button
document.getElementById("fetch-more-posts").addEventListener("click", () => {
  console.log("button clicked");
  throttledFetchPosts();
});

Dans cet exemple, même si un utilisateur clique rapidement sur le bouton « Récupérer plus de publications », la fonction fetchPosts ne sera déclenchée qu'une fois toutes les deux secondes, comme le montre la démo ci-dessous.
 

Choisir un exemple

Disons que vous disposez de données de profil utilisateur détaillées, mais que vous souhaitez uniquement afficher des propriétés spécifiques telles que le nom d'utilisateur, l'adresse e-mail et l'âge dans le composant de résumé de l'utilisateur. La fonction pick vous aide à extraire facilement ces propriétés.

Voici une démonstration de son fonctionnement :

// Pick Example
import { pick } from "es-toolkit";

// dummy user data
const user = {
  id: 1,
  username: "johndoe",
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    country: "USA",
  },
  phoneNumber: "1234-5678",
};

// Use pick to select specific properties
const pickedUser = pick(user, ["username", "email", "age"]);

console.log("pickedUser", pickedUser)

Dans cet exemple, la fonction pick extrait les propriétés du nom d'utilisateur, de l'e-mail et de l'âge de l'objet utilisateur. Le journal de la console affichera :

import { debounce } from "es-toolkit";

// a function that simulates an API call
function fetchData(query) {
  console.log(`Fetching data for: ${query}`);
}

// Using es-toolkit debounce function
const debouncedFetchData = debounce(fetchData, 1000);

document.getElementById("search-input").addEventListener("input", (event) => {
    const query = event.target.value;
    debouncedSearch(query);
});

Exemple unique

Imaginez que vous gérez un blog sur lequel les utilisateurs peuvent ajouter des balises pour catégoriser leurs publications. Vous voulez vous assurer que chaque balise n’apparaît qu’une seule fois. C'est là que la fonction uniq d'es-toolkit est très utile. Il vous aide à filtrer les doublons d'un tableau et à obtenir une liste de balises uniques.

Voici un exemple pratique :

// Throttle Example
import { throttle } from "es-toolkit";

// Function to fetch posts from an API
async function fetchPosts() {
  console.log("Fetching new posts...");
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  console.log("Posts fetched:", posts);
}
// Create a throttled version of fetchPosts
const throttledFetchPosts = throttle(fetchPosts, 2000);

// Set up an event listener on the button
document.getElementById("fetch-more-posts").addEventListener("click", () => {
  console.log("button clicked");
  throttledFetchPosts();
});

Dans l'exemple ci-dessus, la fonction uniq supprime les doublons du tableau de balises. Le journal de la console affichera :

// Pick Example
import { pick } from "es-toolkit";

// dummy user data
const user = {
  id: 1,
  username: "johndoe",
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    country: "USA",
  },
  phoneNumber: "1234-5678",
};

// Use pick to select specific properties
const pickedUser = pick(user, ["username", "email", "age"]);

console.log("pickedUser", pickedUser)

Comment es-toolkit répond aux défis de performances et de taille des bundles

Vous pourriez être curieux de savoir comment es-toolkit relève ces défis. Sous le capot, es-toolkit exploite des API JavaScript modernes pour offrir des performances plus rapides et des tailles de bundles nettement plus petites.

En plus de cela, es-toolkit utilise TypeScript, ce qui permet de supprimer une grande partie du code défensif supplémentaire qui vérifie généralement les types d'arguments au moment de l'exécution. Cela rend non seulement le code plus efficace, mais minimise également toute surcharge inutile susceptible de ralentir les choses.

Une autre différence clé est que les fonctions de l'utilitaire Lodash sont souvent interdépendantes, ce qui signifie que l'importation d'une fonction peut en entraîner plusieurs autres avec elle. En revanche, les fonctions d’es-toolkit sont pour la plupart autonomes, ce qui permet de conserver la légèreté de votre offre groupée.

Pour vraiment voir la différence, vous pouvez utiliser webpack-bundle-analyzer pour visualiser la taille de votre bundle. J'ai tout configuré pour vous, donc tout ce que vous avez à faire est de passer à la branche principale et d'exécuter npm i && npm run build à partir de la racine du référentiel cloné, et cela ouvrira une page avec tous les détails sur votre bundle.

L'image ci-dessous montre la taille du bundle lors de l'utilisation d'es-toolkit. Vous pouvez voir que la plupart des fonctions d'es-toolkit sont autonomes, ce qui se traduit par des tailles de bundle plus petites.

 

Maintenant, remplaçons es-toolkit par lodash-es dans les instructions d'importation des exemples ci-dessus et exécutons à nouveau npm run build pour vérifier la taille du bundle lodash-es.

L'image ci-dessous montre que les fonctions Lodash sont pour la plupart interdépendantes, faisant appel à de nombreux autres utilitaires lors de l'importation d'un seul :

 

Conclusion

es-toolkit peut être une excellente alternative aux bibliothèques d'utilitaires comme Lodash, en particulier lorsque les performances et la taille du bundle sont des considérations clés. Sa petite taille de bundle, son utilisation moderne des fonctionnalités JavaScript et sa solide prise en charge de TypeScript en font un excellent choix pour les développeurs.

J'espère que vous avez trouvé cette exploration d'es-toolkit utile pour vos projets JavaScript, mais ne vous arrêtez pas là ! Je vous encourage à essayer es-toolkit dans vos propres applications et à partager vos expériences avec nous dans les commentaires ci-dessous. Bon codage !

---

Ajoutez-vous de nouvelles bibliothèques JS pour améliorer les performances ou créer de nouvelles fonctionnalités ? Et s’ils faisaient le contraire ?

Il ne fait aucun doute que les frontends deviennent de plus en plus complexes. À mesure que vous ajoutez de nouvelles bibliothèques JavaScript et d'autres dépendances à votre application, vous aurez besoin de plus de visibilité pour garantir que vos utilisateurs ne rencontrent pas de problèmes inconnus.

LogRocket est une solution de surveillance des applications frontales qui vous permet de rejouer les erreurs JavaScript comme si elles se produisaient dans votre propre navigateur afin que vous puissiez réagir plus efficacement aux bugs.

LogRocket fonctionne parfaitement avec n'importe quelle application, quel que soit le framework, et dispose de plugins pour enregistrer un contexte supplémentaire depuis Redux, Vuex et @ngrx/store. Au lieu de deviner pourquoi les problèmes surviennent, vous pouvez regrouper et signaler l'état dans lequel se trouvait votre application lorsqu'un problème est survenu. LogRocket surveille également les performances de votre application, en rapportant des mesures telles que la charge du processeur du client, l'utilisation de la mémoire du client, etc.

Construisez en toute confiance – Commencez la surveillance gratuitement.

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!