Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
lodash vs underscore size comprasion

In reply to Jeremy's tweet, that underscore is 3x smaller (simpler?) than Lodash! https://twitter.com/jashkenas/status/568564455937839106

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));
@stephanebachelier

This comment has been minimized.

Copy link

stephanebachelier commented Feb 20, 2015

@alekseykulikov which lodash version are you using ? v3 ?

@jdalton

This comment has been minimized.

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
@alekseykulikov

This comment has been minimized.

Copy link
Owner Author

alekseykulikov commented Feb 22, 2015

Thanks @jdalton for useful pro tips!

@ricardobeat

This comment has been minimized.

Copy link

ricardobeat commented May 1, 2015

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?

@jdalton

This comment has been minimized.

Copy link

jdalton commented Sep 16, 2016

@ricardobeat
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
You can’t perform that action at this time.