es-toolkit, alternatif Lodash

Ditulis oleh Rishi Purwar✏️

Jika anda telah membina aplikasi JavaScript untuk seketika, anda mungkin telah menggunakan perpustakaan utiliti seperti Lodash. Perpustakaan ini padat dengan fungsi berguna yang menjadikan pengekodan dalam JavaScript lebih mudah dan lebih cekap. Tetapi apabila projek anda berkembang dan anda mula menggunakan lebih banyak fungsi utiliti, anda mungkin perasan bahawa saiz berkas anda juga mula meningkat.

Ini benar terutamanya apabila anda bergantung pada perpustakaan berat seperti Lodash, yang membuatkan anda tertanya-tanya sama ada terdapat alternatif yang lebih baik.

Di situlah es-toolkit datang — perpustakaan utiliti JavaScript moden berprestasi tinggi yang ringan dan dilengkapi dengan sokongan TypeScript yang kukuh, menjadikannya alternatif yang hebat kepada perpustakaan popular seperti Lodash.

Ini adalah perbandingan utama antara es-toolkit dan Lodash:

• es-toolkit menawarkan fungsi utiliti utama yang serupa dengan Lodash, meliputi kawasan seperti fungsi, tatasusunan, objek, rentetan, matematik, predikat dan janji
• Fungsi es-toolkit selalunya lebih pantas daripada Lodash kerana ia menggunakan API JavaScript moden dalam pelaksanaannya dan TypeScript untuk semakan jenis, mengurangkan keperluan untuk kod pertahanan tambahan.
• Penanda aras prestasi menunjukkan bahawa fungsi es-toolkit mengatasi prestasi setara Lodash, kadangkala dengan margin yang ketara
• Fungsi es-toolkit mempunyai saiz berkas yang jauh lebih kecil berbanding dengan persamaan Lodash, yang membawa kepada masa muat yang lebih pantas dan prestasi yang lebih baik
• es-toolkit menangani prestasi dan cabaran saiz berkas dengan memanfaatkan ciri JavaScript moden dan mengelakkan saling bergantung yang terdapat dalam Lodash
• fungsi es-toolkit kebanyakannya berdiri sendiri, menghalang kemasukan kod yang tidak diperlukan secara tidak sengaja, tidak seperti Lodash di mana fungsi utiliti selalunya saling bergantung

Mari kita mendalami secara ringkas tentang perbezaan ini dan lihat cara anda boleh menggunakan es-toolkit dalam projek JavaScript anda.

Ciri utama es-toolkit

Berikut ialah pandangan ringkas tentang apa yang es-toolkit bawa ke meja:

• Fungsi termasuk memoize ke cache hasil fungsi dan nyahpantul untuk mengehadkan kekerapan fungsi dipanggil
• Tatasusunan seperti uniq untuk menapis pendua dan perbezaan untuk mencari perkara yang berbeza antara tatasusunan
• Alat untuk mengendalikan objek JavaScript, seperti cloneDeep untuk pengklonan dalam dan flattenObject untuk mengubah objek bersarang menjadi struktur rata
• Alat manipulasi rentetan, termasuk kebabCase untuk menukar rentetan kepada kebab-case
• Pembantu matematik suka rawak untuk menjana nombor rawak dan bulatkan untuk membundarkannya
• Taip fungsi pengawal seperti isNil untuk menyemak nilai null atau tidak ditentukan dengan mudah
• Utiliti untuk bekerja dengan kod tak segerak, seperti kelewatan untuk menjeda pelaksanaan sebentar

Perbandingan prestasi dan saiz berkas

Untuk benar-benar memahami faedah es-toolkit, mari bandingkan prestasi dan saiz berkasnya dengan Lodash.

Prestasi

Fungsi es-toolkit selalunya lebih pantas daripada Lodash kerana ia menggunakan API JavaScript moden dalam pelaksanaannya. Sebagai contoh, fungsi omit es-toolkit adalah kira-kira 11.8 kali lebih cepat daripada fungsi omit lodash.

Berikut ialah jadual yang membandingkan prestasi es-toolkit dan lodash-es untuk pelbagai fungsi:

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×

Saiz bundle

Mengenai saiz bundle, es-toolkit benar-benar bersinar. Saiz berkas yang lebih kecil bermakna aplikasi web anda akan dimuatkan dengan lebih pantas dan berprestasi lebih baik, terutamanya pada rangkaian yang lebih perlahan.

Berikut ialah perbandingan saiz berkas untuk beberapa fungsi biasa dalam es-toolkit dan 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

Fungsi es-toolkit jauh lebih kecil berbanding dengan rakan sejawat Lodash mereka. Sebagai contoh, fungsi sampel dalam es-toolkit hanyalah 88 bait, manakala fungsi yang sama dalam Lodash ialah 2,000 bait — hampir 96 peratus lebih kecil!

Menggunakan es-toolkit dalam apl JavaScript

Mari kita lihat beberapa contoh untuk melihat betapa mudahnya menggunakan es-toolkit dalam aplikasi JavaScript. Dalam bahagian ini, kami akan meneroka cara es-toolkit mengendalikan tugas biasa seperti nyahlantun, pendikit, memilih sifat tertentu daripada objek dan mengalih keluar pendua daripada tatasusunan.

Dan teka apa? Untuk memudahkan lagi, saya telah mengumpulkan repositori kod permulaan pada GitHub yang boleh anda klon dan mula mencuba dengan segera. Anda akan menemui kod HTML dan CSS untuk semua contoh yang akan kami bincangkan, bersama dengan semua yang anda perlukan untuk bermula. Lihat repo di sini dan ikuti bersama.

Contoh debounce

Katakanlah anda sedang membina ciri carian untuk tapak web yang membolehkan pengguna mencari maklumat tentang topik yang berbeza.

Anda mahu mengambil data semasa pengguna menaip tetapi tanpa menghantar permintaan untuk setiap ketukan kekunci tunggal; jika tidak, anda mungkin membanjiri API dengan terlalu banyak panggilan. Di situlah fungsi nyahlantun daripada es-toolkit berguna.

Begini cara ia berfungsi:

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

Dalam demo di bawah, walaupun saya menaip lima huruf, fungsi fetchData hanya dipanggil selepas saya berhenti menaip seketika.

Dengan cara ini, kita boleh mengelak daripada membuat permintaan API yang tidak perlu pada setiap tekanan kekunci menggunakan fungsi nyahlantun.
 

Contoh pendikit

Andaikan anda mempunyai butang pada halaman web anda yang memuatkan lebih banyak siaran apabila diklik. Untuk mengelakkan berbilang panggilan API jika butang diklik terlalu cepat, anda boleh menggunakan fungsi pendikit daripada es-toolkit. Ia memastikan panggilan API berlaku hanya pada selang waktu yang ditetapkan, walaupun butang diklik beberapa kali.

Begini cara anda boleh menggunakannya:

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

Dalam contoh ini, walaupun pengguna mengklik butang "Ambil Lagi Siaran" dengan pantas, fungsi fetchPosts hanya akan dicetuskan sekali setiap dua saat, seperti yang ditunjukkan dalam demo di bawah.
 

Pilih contoh

Katakan anda mempunyai data profil pengguna yang terperinci, tetapi anda hanya mahu memaparkan sifat tertentu seperti nama pengguna, e-mel dan umur dalam komponen ringkasan pengguna. Fungsi pilih membantu anda mengekstrak sifat ini dengan mudah.

Berikut ialah demonstrasi cara ia berfungsi:

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

Dalam contoh ini, fungsi pilih mengekstrak nama pengguna, e-mel dan sifat umur daripada objek pengguna. Log konsol akan mengeluarkan:

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

Contoh Uniq

Bayangkan anda menjalankan blog di mana pengguna boleh menambah teg untuk mengkategorikan siaran mereka. Anda ingin memastikan bahawa setiap teg hanya muncul sekali. Di sinilah fungsi uniq dari es-toolkit sangat berguna. Ia membantu anda menapis pendua daripada tatasusunan dan mendapatkan senarai teg unik.

Berikut ialah contoh praktikal:

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

Dalam contoh di atas, fungsi uniq mengalih keluar pendua daripada tatasusunan tag. Log konsol akan mengeluarkan:

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

Cara es-toolkit menangani prestasi dan cabaran saiz berkas

Anda mungkin ingin tahu tentang cara es-toolkit menangani cabaran ini. Di bawah hud, es-toolkit memanfaatkan API JavaScript moden untuk menyampaikan prestasi yang lebih pantas dan saiz berkas yang jauh lebih kecil.

Selain itu, es-toolkit menggunakan TypeScript, yang membantu memotong banyak kod pertahanan tambahan yang biasanya menyemak jenis hujah semasa runtime. Ini bukan sahaja menjadikan kod berjalan dengan lebih cekap tetapi juga meminimumkan sebarang overhed yang tidak perlu yang boleh memperlahankan keadaan.

Satu lagi perbezaan utama ialah fungsi utiliti Lodash selalunya saling bergantung, bermakna mengimport satu fungsi boleh menyeret banyak fungsi lain bersama-sama dengannya. Sebaliknya, fungsi es-toolkit kebanyakannya berdiri sendiri, yang membantu memastikan berkas anda ringan.

Untuk benar-benar melihat perbezaannya, anda boleh menggunakan webpack-bundle-analyzer untuk menggambarkan saiz bundle anda. Saya telah menyediakan segala-galanya untuk anda, jadi semua yang anda perlu lakukan ialah daftar keluar ke cawangan utama dan jalankan npm i && npm run build daripada akar repositori klon, dan ia akan membuka halaman dengan semua butiran tentang berkas anda.

Imej di bawah menunjukkan saiz berkas apabila menggunakan es-toolkit. Anda boleh melihat bahawa kebanyakan fungsi es-toolkit adalah kendiri, yang menghasilkan saiz berkas yang lebih kecil.

 

Sekarang, mari gantikan es-toolkit dengan lodash-es dalam penyata import daripada contoh di atas dan jalankan npm run build sekali lagi untuk menyemak saiz bundle lodash-es.

Imej di bawah menunjukkan bahawa fungsi Lodash kebanyakannya saling bergantung, menarik masuk banyak utiliti lain apabila mengimport hanya satu:

 

Kesimpulan

es-toolkit boleh menjadi alternatif yang hebat kepada perpustakaan utiliti seperti Lodash, terutamanya apabila prestasi dan saiz berkas menjadi pertimbangan utama. Saiz berkasnya yang kecil, penggunaan ciri JavaScript moden dan sokongan TypeScript yang kukuh menjadikannya pilihan yang sangat baik untuk pembangun.

Saya harap anda mendapati penerokaan es-toolkit ini berguna untuk projek JavaScript anda, tetapi jangan berhenti di sini! Saya menggalakkan anda untuk mencuba es-toolkit dalam aplikasi anda sendiri dan berkongsi pengalaman anda dengan kami dalam ulasan di bawah. Selamat mengekod!

---

Adakah anda menambah perpustakaan JS baharu untuk meningkatkan prestasi atau membina ciri baharu? Bagaimana jika mereka melakukan sebaliknya?

Tidak syak lagi bahawa bahagian hadapan semakin kompleks. Semasa anda menambahkan perpustakaan JavaScript baharu dan kebergantungan lain pada apl anda, anda memerlukan lebih keterlihatan untuk memastikan pengguna anda tidak menghadapi isu yang tidak diketahui.

LogRocket ialah penyelesaian pemantauan aplikasi bahagian hadapan yang membolehkan anda memainkan semula ralat JavaScript seolah-olah ia berlaku dalam penyemak imbas anda sendiri supaya anda boleh bertindak balas terhadap pepijat dengan lebih berkesan.

LogRocket berfungsi dengan sempurna dengan mana-mana apl, tanpa mengira rangka kerja dan mempunyai pemalam untuk log konteks tambahan daripada Redux, Vuex dan @ngrx/store. Daripada meneka mengapa masalah berlaku, anda boleh mengagregat dan melaporkan tentang keadaan permohonan anda semasa isu berlaku. LogRocket juga memantau prestasi apl anda, melaporkan metrik seperti beban CPU pelanggan, penggunaan memori pelanggan dan banyak lagi.

Bina dengan yakin — Mulakan pemantauan secara percuma.

Atas ialah kandungan terperinci es-toolkit, alternatif Lodash. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!