Lodash

モジュール性、パフォーマンス、追加機能を提供するモダンな JavaScript ユーティリティ ライブラリです。

メソッドごとのパッケージ

Lodash メソッドは lodash.mapvalueslodash.pickby などといったスタンドアロンの メソッドごとのパッケージ で利用できます。これらのパッケージには、メソッドに依存するコードのみが含まれます。

しかしながら、これらのパッケージの利用は推奨されず、v5 では削除される予定です。

これらのパッケージは軽量に見えるかもしれませんが、プロジェクトでメソッドごとに複数のパッケージとメインの lodash パッケージに依存する場合、通常は node_modules と webpack/rollup バンドルのサイズが増加します。メインの lodash パッケージの多くのメソッドはコードを共有しているのに対し、メソッドごとのパッケージは内部的に依存するコードのコピーをバンドルします。

たとえば、throttle は内部的に debounce を使用します。メインの lodash パッケージから両方のメソッドを使用するプロジェクトの場合、throttledebounce を直接インポートするコードと同じ debounce モジュールをインポートするため、debounce のコピーは 1 つしか webpack バンドルに含まれません。

その一方で、プロジェクトが lodash.throttle から throttle をインポートする場合、lodash.throttle に内部的にバンドルされている debounce の追加コピーが、メインの lodash パッケージまたは lodash.debounce からの debounce に加えて webpack バンドルに含まれます。

だけど lodash は十分に軽量じゃない!

心配いはいりません。たとえば const throttle = require('lodash/throttle') のようにメソッドを直接インポートまたは require すると、パッケージが使用する lodash コードのサブセットのみがパッケージを使用するプロジェクトにバンドルされます。

このようなインポート方法が面倒だと思われる場合は、babel-plugin-lodash を使用して import { throttle, debounce } from 'lodash' といったトップレベルの named import を direct import ステートメントに変換できます。

さらに、webpack や rollup といった最新のツリーシェイキングバンドラは、直接インポートや babel プラグインを使用しなくても不要なコードをバンドルしなくなります。

メインの lodash パッケージに移行する

メソッドごとのパッケージのインポートをメインの lodash パッケージのインポートに変換するための jscodeshift トランスフォーム が利用できます。