Skip to content

Instantly share code, notes, and snippets.

@alekseykulikov
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! 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
Copy link

@alekseykulikov which lodash version are you using ? v3 ?

@jdalton
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
Copy link
Author

Thanks @jdalton for useful pro tips!

@ricardobeat
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?

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