Skip to content

Instantly share code, notes, and snippets.

Last active October 30, 2017 07:34
Show Gist options
  • Save alekseykulikov/5f4a6ca69e7b4ebed726 to your computer and use it in GitHub Desktop.
Save alekseykulikov/5f4a6ca69e7b4ebed726 to your computer and use it in GitHub Desktop.
lodash vs underscore size comprasion

In reply to Jeremy's tweet, that underscore is 3x smaller (simpler?) than Lodash!

Apparently, it's only true if you use <script> tag, but if you use lodash's module feature and build your project with browserify(or webpack) you get different numbers. In simple cases underscore can be 4-6 times bigger.

15020 bundle-lodash-without.js
 4820 bundle-lodash-without.min.js
 1647 bundle-lodash-without.min.js.gz
13032 bundle-lodash.js
 6103 bundle-lodash.min.js
 1854 bundle-lodash.min.js.gz
51951 bundle-underscore.js
25045 bundle-underscore.min.js
 7093 bundle-underscore.min.js.gz

Build commands:

browserify lodash.js -o bundle.lodash.js
uglifyjs bundle.lodash.js -o bundle.lodash.min.js
gzip -c -- bundle-lodash.min.js > bundle-lodash.min.js.gz
var without = require('lodash.without');
console.log(without([1, 2, 3, 4], 3));
var without = require('lodash/array/without');
console.log(without([1, 2, 3, 4], 3));
var _ = require('underscore');
console.log(_.without([1, 2, 3, 4], 3));
Copy link

@alekseykulikov which lodash version are you using ? v3 ?

Copy link

jdalton commented Feb 20, 2015

Using more than the default browserify/uglify options you can get the
require('lodash/array/without') example to 1.2kb gzipped:

$ browserify test.js -p bundle-collapser/plugin -o bundle.js
$ uglifyjs bundle.js -m -c "comparisons=false,keep_fargs=true,unsafe=true,unsafe_comps=true,warnings=false" -b "ascii_only=true,beautify=false" -o bundle.min.js
$ pretty-bytes $(gzip-size bundle.min.js) # 1.25 kB

Copy link

Thanks @jdalton for useful pro tips!

Copy link

1.2kb (gzipped!) for a single method is not something to cheer on.. compare to this which is 36 bytes or 319B after browserify + gzip:

console.log([1, 2, 3, 4].filter(function (n) { return n !== 3 })

Is vanilla js "better"? This argument is very superficial. What about getting a more realistic subset of the libraries from a real project and comparing that?

Copy link

jdalton commented Sep 16, 2016

Using lodash-webpack-plugin the size is ~1Kb.
The _.without method is a little more involved than your inline snippet and more flexible/reusable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment