lodashはメソッドによってファイルサイズが全然違っていた

概要

Lodashは便利なnpmパッケージですが、ファイルサイズが非常に大きいです。
圧縮前で71.5kB、圧縮後で25.2kBなので、import _ from 'lodash' をフロントエンド開発でやってしまうと、画面のJSロード時間に影響が出てしまいます。
解決策として、import range from 'lodash/range'のように、1つのメソッドだけをインポートすることが知られています。
しかし、実はメソッドによってファイルサイズが異なります。
例えば、lodash/max は 1.6kB ですが、lodash/omit は 21.5kBもあります。これは lodash/omit がいくつかの内部メソッドをインポートしているためで、特に _baseClone.js のファイルサイズが大きいからです。
このようにインポートする内部メソッドによってファイルサイズがかなり異なるため、全てのメソッドのファイルサイズを計算してみました。

メソッドごとのファイルサイズ

Function Name	File Size(kB)	Gzip file Size(kB)
iteratee	24.6	7.5
matchesProperty	23.4	7.2
xorBy	22.2	7.2
sortBy	22.2	7.2
unionBy	21.6	6.9
omit	21.5	6.6
differenceBy	21.4	6.9
matches	21.3	6.5
intersectionBy	21.2	6.8
omitBy	20.9	6.6
flatMapDepth	20.7	6.7
overEvery	20.6	6.6
over	20.5	6.6
overSome	20.5	6.6
pickBy	20.5	6.5
overArgs	20.4	6.6
orderBy	20.4	6.6
cond	20.1	6.4
findLast	20.0	6.5
find	20.0	6.5
groupBy	19.9	6.4
countBy	19.9	6.4
keyBy	19.9	6.4
uniqBy	19.8	6.4
flatMapDeep	19.8	6.4
flatMap	19.8	6.4
findLastIndex	19.7	6.4
findIndex	19.7	6.4
every	19.7	6.3
reject	19.7	6.3
partition	19.6	6.3
some	19.6	6.3
pullAllBy	19.6	6.3
transform	19.6	6.3
reduce	19.5	6.3
reduceRight	19.5	6.3
remove	19.5	6.3
map	19.4	6.2
filter	19.4	6.2
invertBy	19.3	6.2
mapKeys	19.3	6.2
mapValues	19.3	6.2
findLastKey	19.1	6.1
findKey	19.1	6.1
sortedLastIndexBy	19.1	6.2
sortedIndexBy	19.0	6.2
dropRightWhile	19.0	6.1
takeRightWhile	19.0	6.1
dropWhile	19.0	6.1
takeWhile	19.0	6.1
maxBy	18.9	6.1
minBy	18.9	6.1
meanBy	18.9	6.0
sortedUniqBy	18.9	6.0
sumBy	18.8	6.0
conforms	17.2	5.2
cloneDeepWith	16.9	5.1
cloneWith	16.9	5.1
clone	16.9	5.1
cloneDeep	16.9	5.1
isMatchWith	15.2	4.9
isMatch	15.1	4.9
defaultsDeep	14.8	4.8
isEqualWith	14.6	4.7
mergeWith	14.6	4.7
merge	14.6	4.7
isEqual	14.5	4.7
bindAll	14.0	5.2
rearg	13.4	5.0
invokeMap	13.1	4.3
wrap	12.8	4.8
bind	12.6	4.8
bindKey	12.6	4.8
partial	12.6	4.8
partialRight	12.6	4.8
unary	12.3	4.6
curryRight	12.3	4.6
curry	12.3	4.6
ary	12.2	4.6
flip	12.2	4.6
template	12.0	4.3
pick	11.3	3.8
pullAt	11.2	3.8
xorWith	10.7	3.5
xor	10.5	3.4
at	9.9	3.3
unionWith	9.8	3.2
union	9.6	3.2
differenceWith	9.6	3.1
difference	9.5	3.1
method	9.4	3.1
methodOf	9.4	3.1
invoke	9.3	3.1
intersectionWith	9.0	3.0
updateWith	8.9	3.0
update	8.9	3.0
intersection	8.8	2.9
without	8.6	2.8
zipObjectDeep	8.6	2.9
setWith	8.5	2.9
has	8.5	2.8
set	8.5	2.9
hasIn	8.4	2.8
toArray	8.2	2.9
unset	8.1	2.7
property	7.8	2.6
assign	7.8	2.8
extendWith	7.7	2.8
assignWith	7.7	2.8
extend	7.7	2.8
assignInWith	7.7	2.8
assignIn	7.7	2.8
get	7.7	2.5
propertyOf	7.7	2.5
result	7.6	2.5
uniqWith	7.3	2.4
uniq	7.2	2.3
toPath	7.2	2.3
defaults	7.1	2.6
flowRight	7.0	2.6
flow	7.0	2.6
entries	6.9	2.4
entriesIn	6.8	2.4
toPairs	6.8	2.4
toPairsIn	6.8	2.4
sampleSize	6.8	2.4
create	6.5	2.3
includes	6.4	2.3
camelCase	6.4	2.6
startCase	6.3	2.6
toPlainObject	6.1	2.2
isEmpty	5.9	2.1
memoize	5.7	1.9
truncate	5.6	2.1
mixin	5.5	2.0
shuffle	5.4	1.9
each	5.4	1.9
eachRight	5.4	1.9
forEach	5.4	1.9
forEachRight	5.4	1.9
invert	5.3	1.8
sample	5.2	1.8
kebabCase	5.1	2.3
snakeCase	5.1	2.3
lowerCase	5.1	2.3
upperCase	5.1	2.3
spread	5.1	2.0
forOwnRight	5.0	1.8
forOwn	5.0	1.8
size	5.0	1.9
forInRight	4.9	1.8
forIn	4.9	1.8
pad	4.9	1.8
padEnd	4.8	1.8
padStart	4.8	1.8
functions	4.8	1.7
functionsIn	4.8	1.7
nthArg	4.8	1.9
values	4.8	1.7
valuesIn	4.8	1.7
conformsTo	4.8	1.7
zipWith	4.7	1.8
pull	4.6	1.8
rest	4.6	1.8
keys	4.5	1.6
keysIn	4.5	1.6
split	4.5	1.7
delay	4.4	1.7
zip	4.4	1.7
attempt	4.3	1.6
trim	3.8	1.5
repeat	3.7	1.5
isMap	3.7	1.4
isSet	3.7	1.5
defer	3.7	1.5
trimEnd	3.5	1.4
fill	3.5	1.4
trimStart	3.4	1.4
random	3.4	1.4
chunk	3.4	1.4
slice	3.3	1.3
rangeRight	3.3	1.3
range	3.3	1.3
deburr	3.2	1.5
words	3.2	1.4
isWeakMap	3.2	1.3
throttle	3.2	1.3
capitalize	3.1	1.2
flattenDepth	3.1	1.2
lowerFirst	3.0	1.2
upperFirst	3.0	1.2
floor	3.0	1.2
round	3.0	1.2
ceil	3.0	1.2
debounce	2.9	1.3
zipObject	2.9	1.2
endsWith	2.9	1.2
startsWith	2.9	1.2
unzipWith	2.7	1.0
indexOf	2.7	1.1
lastIndexOf	2.6	1.1
times	2.6	1.1
nth	2.5	1.1
dropRight	2.5	1.1
takeRight	2.5	1.1
drop	2.5	1.1
take	2.5	1.0
once	2.4	1.0
toSafeInteger	2.4	1.0
isTypedArray	2.4	0.9
before	2.4	1.0
isNative	2.4	1.0
isSafeInteger	2.4	1.0
toLength	2.4	1.0
after	2.3	1.0
unzip	2.3	0.9
inRange	2.3	1.0
isInteger	2.2	0.9
concat	2.2	0.9
clamp	2.2	0.9
gt	2.2	0.9
lt	2.2	0.9
toInteger	2.2	0.9
gte	2.1	0.9
lte	2.1	0.9
sortedIndexOf	2.1	0.9
sortedLastIndexOf	2.1	0.9
add	2.1	0.9
divide	2.1	0.9
subtract	2.1	0.8
multiply	2.1	0.8
unescape	2.1	0.9
toFinite	2.1	0.9
escape	2.1	0.9
flattenDeep	2.0	0.8
flatten	2.0	0.8
sortedLastIndex	2.0	0.9
sortedIndex	2.0	0.9
toNumber	1.9	0.8
parseInt	1.9	0.8
escapeRegExp	1.9	0.8
replace	1.9	0.8
isError	1.8	0.7
uniqueId	1.8	0.8
toLower	1.8	0.8
toUpper	1.8	0.8
chain	1.8	0.7
toString	1.7	0.7
isArrayBuffer	1.7	0.7
isElement	1.7	0.7
isArrayLikeObject	1.7	0.7
isRegExp	1.7	0.7
isDate	1.7	0.7
isPlainObject	1.6	0.7
max	1.6	0.7
min	1.6	0.7
isArrayLike	1.6	0.7
isArguments	1.5	0.6
isFunction	1.4	0.6
isNaN	1.3	0.6
isString	1.3	0.6
pullAllWith	1.3	0.6
pullAll	1.3	0.6
isNumber	1.3	0.5
isSymbol	1.3	0.5
isBoolean	1.3	0.5
isWeakSet	1.2	0.5
isBuffer	0.8	0.4
isFinite	0.6	0.3
now	0.6	0.3
mean	0.5	0.3
negate	0.5	0.3
sortedUniq	0.5	0.3
tail	0.4	0.3
initial	0.4	0.3
sum	0.4	0.2
castArray	0.3	0.2
compact	0.3	0.2
fromPairs	0.3	0.2
isLength	0.2	0.2
isObject	0.2	0.2
join	0.2	0.2
reverse	0.2	0.2
first	0.2	0.2
last	0.2	0.2
head	0.2	0.2
isObjectLike	0.2	0.2
constant	0.2	0.1
defaultTo	0.2	0.2
eq	0.2	0.2
isUndefined	0.2	0.1
tap	0.2	0.1
isNull	0.2	0.1
isNil	0.2	0.1
thru	0.2	0.1
identity	0.2	0.1
isArray	0.2	0.1
stubArray	0.2	0.1
stubObject	0.2	0.1
stubString	0.2	0.1
stubTrue	0.2	0.1
stubFalse	0.2	0.1
noop	0.2	0.1

感想

20kB以上もあるメソッドが意外に多いですね。
1つのメソッドでと考えるとファイルサイズは大きい方だと思います。
JSファイルサイズを気にしているWebアプリケーションの場合、これを参考に気を付けてもらえればと思います。

その他

• Lodashのバージョン ... 4.17.21
• コンパイル方法など ... https://github.com/matsu012/file-size-lodash