Lodash-es vs individual Lodash utilities: Size comparison
At work, we are using lodash in our front end applications. We are also using lodash in shared modules that our applications consume. Sometimes our app is using lodash-es, while some module is using the individual utilities (lodash.utilityName), and vice-versa. Obviously, duplication of code is not ideal, so we needed to choose one or the other. Which one would result in a smaller bundle size?
The results
Even though the comparison was between lodash-es, and individual lodash utilities, I have tested the original common-js lodash as well. The bundles were generated using the following code.
import drop from 'lodash/drop';
import drop from 'lodash-es/drop';
import drop from 'lodash.drop';The table shows the the individual lodash.utility packages are smaller until the number of packages rises. Once we hit the 10 utilities mark, lodash-es pulls ahead in smallest bundle size. I attribute this to lodash-es being able to share code between functions, whereas single lodash.utility functions are siloed and unable to share code.
How were the utilities selected?
The packages were selected in a roughly random order, so as to avoid taking packages from 1 specific type, e.g. just array, or date functions. Functions of the same type might share many of the same utilities, and I didn’t want that to be a factor in the tests. There are however some utilities that are much larger than others, and that can be seen in the inconsistency of size increase, as the number of utilities increases.
How was the bundle generated?
I had a very simple webpack config to run webpack-bundle-analyzer like so:
// webpack.config.jsconst path = require('path');const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new BundleAnalyzerPlugin(),
]
};
Then then my src/index.js simply imported the functions and made a reference to them so they wouldn’t be tree-shaked.
// src/index.js
import drop from 'lodash-es/drop';
import omit from 'lodash-es/omit';
import fill from 'lodash-es/fill';
import flatten from 'lodash-es/flatten';
import head from 'lodash-es/head';drop
omit
fill
flatten
head
Wrapping up
Thanks for taking the time to read the article, I hope you’ve gained some value from it. Next up, I will be looking at whether Lodash itself can be replaced by Just (https://github.com/angus-c/just), a lightweight replacement for Lodash.
