Lodashのファイルサイズを削減する方法 | 綺麗に死ぬITエンジニア

JavaScriptにおける便利な関数の詰め合わせであるライブラリ「Lodash」。JavaScript（Node.js）での開発をしている人の多くは利用したことがあるでしょう。

今回はそのLodashを使う上で、ライブラリを導入後のファイルサイズを削減する方法を紹介します。

なお、今回当記事で紹介するにあたり、検証にモジュールバンドラーツール「webpack」を利用します。ですが、webpackを利用しない場合においても同様の方法でファイルサイズは削減できます。

ユースケース

Lodashに限らず、比較的高機能なJavaScriptライブラリは、場合によっては性能面や容量（ファイルサイズ）の面で、1機能特化のミニマルなものに比べ劣ることがあります。

例えば、そのライブラリの全ての機能のうち1つの機能しか使わなかったとしても、全ての機能分のファイルサイズを消費し、全ての機能を読み込んでしまいます。

Lodashの場合で言えば、例えばtemplate()関数しか利用しなかったとしても、全ての関数を読み込み、メモリを消費してしまいます。ファイルサイズも無駄に大きいものになります。

このように、Lodashの関数を1つないし少ししか使わないのに無駄にファイルサイズを消費したくない場合に、今回の方法を利用できます。

検証環境の用意

今回の検証にはwebpackを利用し、処理を全て1ファイルにまとめた場合にどれくらいの文字数（バイト数）になるかを検証していきます。

その検証環境の構築手順を示します。

webpack及びLodashを、検証用ディレクトリwebpack-demoへインストールします。

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
npm install --save-dev lodash

これで、下記のコマンドでapp/index.jsをdist/index.jsへビルドして出力できるようになります。

./node_modules/.bin/webpack -p app/index.js dist/index.js

Lodashを通常どおり使用する（通常利用）

まず初めに、通常どおり使用した場合にどのくらいのファイルサイズになるかを検証します。

今回のサンプルコードは、以下です。

import _ from 'lodash';

var hello = _.template('hello <%= user %>!');
console.log(hello({'user': 'fred'}));

Lodashのtemplate()関数を利用して、コンソールにhello fred!とだけ表示するプログラムです。Lodash全体を読み込んでいますが、template()関数しか利用していません。

これをapp/index.jsとして保存し、dist/index.jsへビルドして出力したところ、ファイルサイズは72.631kBとなりました。

これが通常利用時のファイルサイズとなります。

Lodashの利用する関数を直接使用する（直接指定）

Lodashでは、利用する関数だけを直接呼び出すこともできます。以下のように指定します。

import template from 'lodash/template';

var hello = template('hello <%= user %>!');
console.log(hello({'user': 'fred'}));

1行目のimportで、template()関数の記述ファイルを直接指定して取得しています。Lodashではこの方法も公式にサポートされた方法です。

この記述を利用することで、ファイルサイズは13.011kBとなりました。5分の1以下のファイルサイズになりました。

なお、この方法はNode.jsを利用し、モジュールバンドラーを利用する必要がありますので、ケースによっては手軽には導入できない可能性があります。

Lodashの利用する関数のパッケージをインストールする（個別インストール）

Lodashでは、それぞれ関数ごとにパッケージが用意されており、1つ1つインストールして利用できるようにもなっています。

template()関数の場合、npmコマンドで以下のようにすることで、template()関数だけを含むパッケージをインストールできます。

npm install lodash.template

こうして個別にインストールすることにより、以下のように利用することができます。

import template from 'lodash.template';

var hello = template('hello <%= user %>!');
console.log(hello({'user': 'fred'}));

1行目のimportで、template()関数のパッケージを指定して取得しています。

この記述を利用することで、ファイルサイズは6.548kBとなりました。通常利用時の11分の1以下、直接指定時の半分程度のファイルサイズになりました。

まとめ

今回はLodashのtemplate()関数において、通常利用時・直接指定時・個別インストール時のファイルサイズの違いを検証してみました。それぞれ、以下のような結果になりました。

通常利用: 72.631kB
直接指定: 13.011kB
個別インストール: 6.548kB

以上の結果から、Lodashの特定の関数を1つだけ利用する場合、ファイルサイズの観点からは、個別にインストールするのが最も良い選択ということが言えると思います。

無駄にLodashを全て読み込んでいた方は、ご自身の方法を見直してみてはいかがでしょうか。

なお、Lodashにおいて1つだけではなく複数の関数を利用している場合は、Lodashライブラリ内部でコア関数が再利用されることがあるため、必ずしも個別インストールがいいとは限りません（ケースバイケース）。なので、その場合は、ファイルサイズとのバランスをとって、2番目の直接指定の方法が良いかもしれません。

もちろん、速度やファイルサイズを重視しないプロジェクトでは、利便性重視で通常利用するのも正しい選択肢なので、その辺は誤解なさらぬようお願いします。