Lodash

一個現代的 JavaScript 工具程式庫,提供模組化、效能和額外功能。

每個方法套件

Lodash 方法提供獨立的 每個方法套件,例如 lodash.mapvalueslodash.pickby 等。這些套件僅包含方法所依賴的程式碼。

不過,不建議使用這些套件,而且它們 將在 v5 中移除

儘管它們看起來比較輕量,但通常會增加專案中 node_modules 和 webpack/rollup 捆綁的大小,而專案會傳遞依賴多個每個方法套件和/或主 lodash 套件。由於主 lodash 套件中的許多方法共用程式碼,每個方法套件會內部捆綁它們所依賴的任何程式碼的副本。

例如,throttle 內部使用 debounce。在從主 lodash 套件使用這兩個方法的專案中,throttle 會匯入與直接匯入 debounce 的任何程式碼相同的 debounce 模組,因此只會有一個 debounce 副本出現在 webpack 捆綁中。

另一方面,如果專案從 lodash.throttle 匯入 throttle,內部捆綁到 lodash.throttle 中的 debounce 程式碼的額外副本將出現在 webpack 捆綁中,除了來自主 lodash 套件或 lodash.debouncedebounce 之外。

但是 lodash 不夠輕量!

不用擔心,如果您直接匯入或需要方法,例如 const throttle = require('lodash/throttle'),只有套件使用的 lodash 程式碼子集會套件在使用您的套件的專案中。

如果以這種方式匯入似乎很麻煩,您可以使用 babel-plugin-lodash 將命名頂層匯入(例如 import { throttle, debounce } from 'lodash')轉換為直接匯入陳述式。

此外,現代 tree-shaking 套件管理程式,例如 webpack 和 rollup,即使您不使用直接匯入或 babel 外掛程式,也可以避免套件管理程式不必要的程式碼。

移轉至主 lodash 套件

可以使用 jscodeshift 轉換 將每個方法套件匯入轉換為主要 lodash 套件匯入。