es-toolkit, eine Lodash-Alternative

Geschrieben von Rishi Purwar✏️

Wenn Sie schon seit einiger Zeit JavaScript-Anwendungen erstellen, haben Sie wahrscheinlich Dienstprogrammbibliotheken wie Lodash verwendet. Diese Bibliotheken sind vollgepackt mit nützlichen Funktionen, die das Codieren in JavaScript einfacher und effizienter machen. Wenn Ihr Projekt jedoch wächst und Sie mehr Hilfsfunktionen verwenden, stellen Sie möglicherweise fest, dass auch die Größe Ihres Pakets zunimmt.

Dies gilt insbesondere dann, wenn Sie auf umfangreiche Bibliotheken wie Lodash angewiesen sind und Sie sich fragen, ob es eine bessere Alternative gibt.

Hier kommt es-toolkit ins Spiel – eine moderne, leistungsstarke JavaScript-Dienstprogrammbibliothek, die leichtgewichtig ist und über solide TypeScript-Unterstützung verfügt, was sie zu einer großartigen Alternative zu beliebten Bibliotheken wie Lodash macht.

Dies sind die Hauptvergleiche zwischen es-toolkit und Lodash:

• es-toolkit bietet wichtige Hilfsfunktionen ähnlich wie Lodash und deckt Bereiche wie Funktionen, Arrays, Objekte, Strings, Mathematik, Prädikate und Versprechen ab
• Die Funktionen von es-toolkit sind oft schneller als die von Lodash, da sie in ihren Implementierungen moderne JavaScript-APIs und TypeScript für die Typprüfung verwenden, wodurch der Bedarf an zusätzlichem Verteidigungscode reduziert wird.
• Leistungsbenchmarks zeigen, dass die Funktionen von es-toolkit die Lodash-Äquivalente übertreffen, manchmal sogar deutlich.
• Die Funktionen von es-toolkit haben im Vergleich zu den Pendants von Lodash deutlich kleinere Bundle-Größen, was zu schnelleren Ladezeiten und besserer Leistung führt
• es-toolkit bewältigt Leistungs- und Bundle-Größenherausforderungen, indem es moderne JavaScript-Funktionen nutzt und die in Lodash vorhandenen gegenseitigen Abhängigkeiten vermeidet
• es-toolkit-Funktionen sind größtenteils eigenständig und verhindern so die unbeabsichtigte Einbindung von unnötigem Code, im Gegensatz zu Lodash, wo Dienstprogrammfunktionen oft voneinander abhängig sind

Lassen Sie uns diese Unterschiede ins Detail gehen und sehen, wie Sie es-toolkit in Ihren JavaScript-Projekten verwenden können.

Hauptmerkmale von es-toolkit

Hier ein kurzer Blick auf die Vorteile von es-toolkit:

• Funktionen einschließlich Memoize zum Zwischenspeichern von Funktionsergebnissen und Entprellen, um zu begrenzen, wie oft eine Funktion aufgerufen wird
• Arrays wie uniq zum Herausfiltern von Duplikaten und Unterschieden, um die Unterschiede zwischen Arrays herauszufinden
• Tools für den Umgang mit JavaScript-Objekten, wie cloneDeep für Deep Cloning und flattenObject, um verschachtelte Objekte in eine flache Struktur umzuwandeln
• Tools zur String-Manipulation, einschließlich kebabCase zum Konvertieren von Strings in kebab-case
• Mathe-Helfer wie „Random“ zum Generieren von Zufallszahlen und „Round“ zum Abrunden von Zahlen
• Geben Sie Schutzfunktionen wie isNil ein, um einfach nach Null- oder undefinierten Werten zu suchen
• Dienstprogramme für die Arbeit mit asynchronem Code, z. B. „Delay“, um die Ausführung kurz anzuhalten

Vergleich von Leistung und Paketgröße

Um die Vorteile von es-toolkit wirklich zu verstehen, vergleichen wir seine Leistung und Bundle-Größe mit Lodash.

Leistung

Die Funktionen von es-toolkit sind oft schneller als die von Lodash, da sie in ihren Implementierungen moderne JavaScript-APIs verwenden. Beispielsweise ist die Omit-Funktion von es-toolkit etwa 11,8-mal schneller als die Omit-Funktion von lodash.

Hier ist eine Tabelle, in der die Leistung von es-toolkit und lodash-es für verschiedene Funktionen verglichen wird:

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×

Bündelgröße

Wenn es um die Paketgröße geht, glänzt es-toolkit wirklich. Eine kleinere Bundle-Größe bedeutet, dass Ihre Webanwendungen schneller geladen werden und eine bessere Leistung erzielen, insbesondere in langsameren Netzwerken.

Hier ist ein Vergleich der Bundle-Größen für einige gängige Funktionen in es-toolkit und 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

Die Funktionen von es-toolkit sind im Vergleich zu ihren Lodash-Gegenstücken viel kleiner. Beispielsweise ist die Beispielfunktion in es-toolkit nur 88 Byte groß, während die gleiche Funktion in Lodash 2.000 Byte groß ist – fast 96 Prozent kleiner!

Verwendung von es-toolkit in einer JavaScript-App

Sehen wir uns einige Beispiele an, um zu sehen, wie einfach es ist, es-toolkit in einer JavaScript-Anwendung zu verwenden. In diesem Abschnitt untersuchen wir, wie es-toolkit häufige Aufgaben wie Entprellen, Drosseln, das Auswählen bestimmter Eigenschaften von Objekten und das Entfernen von Duplikaten aus einem Array erledigt.

Und wissen Sie was? Um die Sache noch einfacher zu machen, habe ich auf GitHub ein Starter-Code-Repository zusammengestellt, das Sie klonen und sofort mit dem Experimentieren beginnen können. Sie finden den HTML- und CSS-Code für alle von uns behandelten Beispiele sowie alles, was Sie für den Einstieg benötigen. Schauen Sie sich das Repo hier an und folgen Sie ihm.

Beispiel für Entprellung

Angenommen, Sie erstellen eine Suchfunktion für eine Website, mit der Benutzer Informationen zu verschiedenen Themen suchen können.

Sie möchten Daten abrufen, während der Benutzer sie eingibt, ohne jedoch für jeden einzelnen Tastendruck eine Anfrage zu senden. Andernfalls könnten Sie die API mit zu vielen Aufrufen überfluten. Hier bietet sich die Entprellfunktion von es-toolkit an.

So funktioniert es:

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);
});

Obwohl ich in der folgenden Demo fünf Buchstaben eingegeben habe, wird die fetchData-Funktion erst aufgerufen, nachdem ich eine Sekunde lang mit der Eingabe aufgehört habe.

Auf diese Weise können wir mithilfe der Debounce-Funktion vermeiden, dass bei jedem Tastendruck unnötige API-Anfragen gestellt werden.
 

Beispiel für eine Drosselklappe

Angenommen, Sie haben eine Schaltfläche auf Ihrer Webseite, die beim Klicken weitere Beiträge lädt. Um mehrere API-Aufrufe zu verhindern, wenn der Button zu schnell angeklickt wird, können Sie die Throttle-Funktion von es-toolkit nutzen. Dadurch wird sichergestellt, dass der API-Aufruf nur in festgelegten Intervallen erfolgt, auch wenn die Schaltfläche mehrmals angeklickt wird.

So können Sie es verwenden:

// 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();
});

Selbst wenn ein Benutzer in diesem Beispiel schnell auf die Schaltfläche „Weitere Beiträge abrufen“ klickt, wird die Funktion „fetchPosts“ nur alle zwei Sekunden ausgelöst, wie in der Demo unten gezeigt.
 

Wählen Sie ein Beispiel

Angenommen, Sie verfügen über detaillierte Benutzerprofildaten, möchten aber nur bestimmte Eigenschaften wie Benutzername, E-Mail-Adresse und Alter in der Benutzerzusammenfassungskomponente anzeigen. Mit der Auswahlfunktion können Sie diese Eigenschaften einfach extrahieren.

Hier ist eine Demonstration, wie es funktioniert:

// 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)

In diesem Beispiel extrahiert die Pick-Funktion die Benutzernamen-, E-Mail- und Alterseigenschaften aus dem Benutzerobjekt. Das Konsolenprotokoll gibt Folgendes aus:

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);
});

Uniq-Beispiel

Stellen Sie sich vor, Sie betreiben einen Blog, in dem Benutzer Tags hinzufügen können, um ihre Beiträge zu kategorisieren. Sie möchten sicherstellen, dass jedes Tag nur einmal vorkommt. Hier ist die Uniq-Funktion von es-toolkit super nützlich. Es hilft Ihnen, Duplikate aus einem Array herauszufiltern und eine Liste eindeutiger Tags zu erhalten.

Hier ein praktisches Beispiel:

// 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();
});

Im obigen Beispiel entfernt die Uniq-Funktion Duplikate aus dem Tags-Array. Das Konsolenprotokoll gibt Folgendes aus:

// 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)

Wie es-toolkit die Herausforderungen in Bezug auf Leistung und Paketgröße bewältigt

Vielleicht sind Sie neugierig, wie es-toolkit diese Herausforderungen bewältigt. Unter der Haube nutzt es-toolkit moderne JavaScript-APIs, um eine schnellere Leistung und deutlich kleinere Bundle-Größen zu liefern.

Darüber hinaus verwendet es-toolkit TypeScript, wodurch ein Großteil des zusätzlichen Verteidigungscodes eingespart werden kann, der normalerweise Argumenttypen zur Laufzeit überprüft. Dadurch wird der Code nicht nur effizienter ausgeführt, sondern auch unnötiger Overhead minimiert, der die Arbeit verlangsamen kann.

Ein weiterer wesentlicher Unterschied besteht darin, dass Lodash-Dienstprogrammfunktionen oft voneinander abhängig sind, was bedeutet, dass der Import einer Funktion viele andere mit hineinziehen kann. Im Gegensatz dazu sind es-Toolkit-Funktionen größtenteils eigenständig, was dazu beiträgt, dass Ihr Paket kompakt bleibt.

Um den Unterschied wirklich zu erkennen, können Sie den Webpack-Bundle-Analyzer verwenden, um die Größe Ihres Bundles zu visualisieren. Ich habe alles für Sie eingerichtet. Sie müssen also nur noch zum Hauptzweig gehen und „npm i && npm run build“ im Stammverzeichnis des geklonten Repositorys ausführen. Daraufhin wird eine Seite mit allen Details zu Ihrem Bundle geöffnet.

Das Bild unten zeigt die Bundle-Größe bei Verwendung von es-toolkit. Sie sehen, dass die meisten es-toolkit-Funktionen eigenständig sind, was zu kleineren Paketgrößen führt.

 

Jetzt ersetzen wir es-toolkit durch lodash-es in den Importanweisungen aus den obigen Beispielen und führen npm run build erneut aus, um die Paketgröße von lodash-es zu überprüfen.

Das Bild unten zeigt, dass Lodash-Funktionen größtenteils voneinander abhängig sind und viele andere Dienstprogramme einbeziehen, wenn nur eines importiert wird:

 

Abschluss

es-toolkit kann eine großartige Alternative zu Dienstprogrammbibliotheken wie Lodash sein, insbesondere wenn Leistung und Bundle-Größe im Vordergrund stehen. Seine geringe Paketgröße, die Verwendung moderner JavaScript-Funktionen und die solide TypeScript-Unterstützung machen es zu einer ausgezeichneten Wahl für Entwickler.

Ich hoffe, dass Sie diese Erkundung des es-toolkits für Ihre JavaScript-Projekte hilfreich fanden, aber hören Sie hier nicht auf! Ich ermutige Sie, es-toolkit in Ihren eigenen Anwendungen auszuprobieren und Ihre Erfahrungen in den Kommentaren unten mit uns zu teilen. Viel Spaß beim Codieren!

---

Fügen Sie neue JS-Bibliotheken hinzu, um die Leistung zu verbessern oder neue Funktionen zu entwickeln? Was ist, wenn sie das Gegenteil tun?

Es besteht kein Zweifel, dass Frontends immer komplexer werden. Wenn Sie Ihrer App neue JavaScript-Bibliotheken und andere Abhängigkeiten hinzufügen, benötigen Sie mehr Transparenz, um sicherzustellen, dass Ihre Benutzer nicht auf unbekannte Probleme stoßen.

LogRocket ist eine Frontend-Anwendungsüberwachungslösung, mit der Sie JavaScript-Fehler so wiedergeben können, als ob sie in Ihrem eigenen Browser aufgetreten wären, sodass Sie effektiver auf Fehler reagieren können.

LogRocket funktioniert perfekt mit jeder App, unabhängig vom Framework, und verfügt über Plugins zum Protokollieren zusätzlichen Kontexts von Redux, Vuex und @ngrx/store. Anstatt zu raten, warum Probleme auftreten, können Sie den Status Ihrer Anwendung zum Zeitpunkt des Auftretens eines Problems zusammenfassen und darüber berichten. LogRocket überwacht auch die Leistung Ihrer App und meldet Kennzahlen wie die CPU-Auslastung des Clients, die Speichernutzung des Clients und mehr.

Selbstbewusst bauen – Beginnen Sie mit der kostenlosen Überwachung.

Das obige ist der detaillierte Inhalt vones-toolkit, eine Lodash-Alternative. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!