es-toolkit，Lodash 的替代品

作者：Rishi Purwar✏️

如果您建立 JavaScript 應用程式已經有一段時間了，您可能使用過 Lodash 等實用程式庫。這些函式庫包含有用的函數，使 JavaScript 編碼變得更容易、更有效率。但隨著您的專案的成長並且您開始使用更多的實用函數，您可能會注意到您的套件大小也開始增加。

當您依賴像 Lodash 這樣的重型庫時尤其如此，這讓您想知道是否有更好的替代方案。

這就是es-toolkit 的用武之地- 一個現代的、高性能的JavaScript 實用程序庫，它是輕量級的，並且具有可靠的TypeScript 支持，使其成為Lodash 等流行庫的絕佳替代品。

以下是 es-toolkit 和 Lodash 的主要比較：

• es-toolkit 提供與 Lodash 類似的關鍵實用函數，涵蓋函數、陣列、物件、字串、數學、謂詞和 Promise 等領域
• es-toolkit 的函數通常比 Lodash 的函數更快，因為它們在實作中使用現代 JavaScript API 並使用 TypeScript 進行類型檢查，從而減少了對額外防禦程式碼的需求。
• 性能基準測試表明，es-toolkit 函數的性能優於 Lodash 等效項，有時甚至明顯領先
• 與 Lodash 的同類函數相比，es-toolkit 的函數包大小明顯更小，從而實現更快的載入時間和更好的效能
• es-toolkit 透過利用現代 JavaScript 功能並避免 Lodash 中的相互依賴性來解決效能和套件大小挑戰
• es-toolkit 函數大多是獨立的，可以防止無意中包含不必要的程式碼，這與 Lodash 不同，實用函數通常是相互依賴的

讓我們深入了解這些差異的本質，看看如何在 JavaScript 專案中使用 es-toolkit。

es-toolkit的主要特點

以下是 es-toolkit 帶來的快速瀏覽：

• 功能包括用於快取函數結果的 memoize 和用於限制函數呼叫頻率的 debounce
• 像uniq這樣的陣列可以過濾掉重複項和差異來找出陣列之間的差異
• 用於處理JavaScript物件的工具，例如用於深度克隆的cloneDeep和用於將巢狀物件轉換為平面結構的flattenObject
• 字串操作工具，包括 kebabCase 將字串轉換為 kebab-case
• 數學助手，例如 random 來產生隨機數，round 來四捨五入
• 類型保護函數（如 isNil）可輕鬆檢查 null 或未定義值
• 用於處理非同步程式碼的實用程序，例如延遲暫停執行一段時間

效能和捆綁包大小比較

為了真正了解 es-toolkit 的優勢，讓我們將其效能和套裝大小與 Lodash 進行比較。

表現

es-toolkit 的函數通常比 Lodash 的函數更快，因為它們在實作中使用現代 JavaScript API。例如，es-toolkit的omit函數比lodash的omit函數快約11.8倍。

下表比較了 es-toolkit 和 lodash-es 對於各種功能的性能：

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×

捆綁尺寸

當談到捆綁包大小時，es-toolkit 確實很出色。較小的捆綁包大小意味著您的 Web 應用程式載入速度更快且效能更好，尤其是在較慢的網路上。

以下是 es-toolkit 和 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

es-toolkit 的功能比 Lodash 的功能小得多。例如，es-toolkit 中的範例函數只有 88 字節，而 Lodash 中的相同函數有 2,000 位元組——小了近 96%！

在 JavaScript 應用程式中使用 es-toolkit

讓我們來看一些範例，看看在 JavaScript 應用程式中使用 es-toolkit 是多麼容易。在本節中，我們將探討 es-toolkit 如何處理常見任務，例如去抖動、限制、從物件中選取特定屬性以及從陣列中刪除重複項。

你猜怎麼著？為了讓事情變得更加簡單，我在 GitHub 上整理了一個入門程式碼儲存庫，您可以立即複製並開始試驗。您將找到我們將介紹的所有範例的 HTML 和 CSS 程式碼，以及入門所需的一切。查看此處的存儲庫並繼續操作。

去抖動範例

假設您正在為一個網站建立一個搜尋功能，使用者可以在其中找到有關不同主題的資訊。

您希望在使用者鍵入時獲取數據，但不想為每次按鍵發送請求；否則，您可能會因過多的呼叫而淹沒 API。這就是 es-toolkit 的去抖動功能派上用場的地方。

工作原理如下：

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

在下面的示範中，儘管我輸入了五個字母，但 fetchData 函數只有在我停止輸入一秒鐘後才會被呼叫。

這樣，我們就可以避免使用 debounce 函數在每次按鍵時發出不必要的 API 請求。
 

油門範例

假設您的網頁上有一個按鈕，點擊該按鈕會載入更多貼文。為了防止點擊按鈕太快而導致多次 API 呼叫，您可以使用 es-toolkit 中的throttle 功能。它確保 API 呼叫僅在設定的時間間隔內發生，即使按鈕被點擊多次也是如此。

使用方法如下：

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

在這個例子中，即使使用者快速點擊「Fetch More Posts」按鈕，fetchPosts 函數也只會每兩秒觸發一次，如下面的示範所示。
 

選取範例

假設您有詳細的使用者個人資料數據，但您只想在使用者摘要元件中顯示特定屬性，例如使用者名稱、電子郵件和年齡。選擇功能可以幫助您輕鬆提取這些屬性。

以下是其工作原理的示範：

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

在此範例中，pick 函數從使用者物件中提取使用者名稱、電子郵件和年齡屬性。控制台日誌將輸出：

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

獨特的例子

想像一下您正在運行一個博客，用戶可以在其中添加標籤來對他們的帖子進行分類。您要確保每個標籤僅出現一次。這就是 es-toolkit 中的 uniq 函數超級有用的地方。它可以幫助您從陣列中過濾掉重複項並取得唯一標籤的清單。

這是一個實際範例：

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

在上面的範例中，uniq 函數會從標籤陣列中刪除重複項。控制台日誌將輸出：

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

es-toolkit 如何解決效能和捆綁包大小挑戰

您可能對 es-toolkit 如何應對這些挑戰感到好奇。在底層，es-toolkit 利用現代 JavaScript API 來提供更快的效能和更小的套件大小。

最重要的是，es-toolkit 使用 TypeScript，這有助於刪除許多通常在執行時間檢查參數類型的額外防禦程式碼。這不僅使程式碼運行更有效，而且還最大限度地減少了任何可能減慢速度的不必要的開銷。

另一個關鍵區別是 Lodash 實用函數通常是相互依賴的，這意味著導入一個函數可能會同時引入許多其他函數。相比之下，es-toolkit 功能大多是獨立的，這有助於保持套件的輕量級。

要真正看到差異，您可以使用 webpack-bundle-analyzer 來視覺化套件的大小。我已經為您設置好了一切，因此您需要做的就是簽出主分支並從克隆存儲庫的根運行npm i && npm run build ，它將打開一個頁面，其中包含有關您的包的所有詳細信息。

下圖顯示了使用 es-toolkit 時的套件大小。您可以看到大多數 es-toolkit 功能都是獨立的，這導致套件大小更小。

 

現在，讓我們將上面範例中的 import 語句中的 es-toolkit 替換為 lodash-es，並再次執行 npm run build 以檢查 lodash-es 套件的大小。

下圖顯示 Lodash 函數大多是相互依賴的，僅導入一個函數時就會引入許多其他實用程式：

 

結論

es-toolkit 可以成為 Lodash 等實用程式庫的絕佳替代品，尤其是當效能和套件大小是關鍵考慮因素時。它的小套件大小、現代 JavaScript 功能的使用以及可靠的 TypeScript 支援使其成為開發人員的絕佳選擇。

我希望您發現 es-toolkit 的探索對您的 JavaScript 專案有所幫助，但不要就此停止！我鼓勵您在自己的應用程式中嘗試 es-toolkit，並在下面的評論中與我們分享您的經驗。快樂編碼！

---

您是否添加新的 JS 庫來提高效能或建立新功能？如果他們反其道而行怎麼辦？

毫無疑問，前端變得越來越複雜。當您為應用程式新增新的 JavaScript 程式庫和其他依賴項時，您需要更多的可見性以確保您的使用者不會遇到未知問題。

LogRocket 是一個前端應用程式監控解決方案，可讓您重播 JavaScript 錯誤，就像它們發生在您自己的瀏覽器中一樣，以便您可以更有效地對錯誤做出反應。

LogRocket 可以與任何應用程式完美配合，無論框架如何，並且具有用於記錄來自 Redux、Vuex 和 @ngrx/store 的其他上下文的插件。您無需猜測問題發生的原因，而是可以匯總並報告問題發生時應用程式所處的狀態。 LogRocket 還監控您的應用程式的效能，報告客戶端 CPU 負載、客戶端記憶體使用量等指標。

自信地建造 — 開始免費監控。

以上是es-toolkit，Lodash 的替代品的詳細內容。更多資訊請關注PHP中文網其他相關文章！