<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.2/lodash.min.js'></script>
<script src='https://unpkg.com/deepmerge@4.2.2/dist/umd.js'></script>
<script type="module">
import { deepmerge } from 'https://unpkg.com/deepmerge-ts@4.2.1/dist/node/index.mjs';
import { merge as tsDeepmerge } from 'https://unpkg.com/ts-deepmerge@7.0.0/esm/index.js';
window.deepmergeTs = deepmerge;
window.tsDeepmerge = tsDeepmerge;
</script>
var a = { a: 'oh', b: 'my', c: { a: 'a', b: { c: 'c' } } };
var b = { c: { b: { d: 'a' }, c: { d: 'd' } } };
var c = _.merge({}, a, b);
const x = {
foo: { bar: 3 },
array: [{
does: 'work',
too: [ 1, 2, 3 ]
}]
}
const y = {
foo: { baz: 4 },
quux: 5,
array: [{
does: 'work',
too: [ 4, 5, 6 ]
}, {
really: 'yes'
}]
}
var z = _.merge({}, x, y);
var a = { a: 'oh', b: 'my', c: { a: 'a', b: { c: 'c' } } };
var b = { c: { b: { d: 'a' }, c: { d: 'd' } } };
var c = deepmerge({}, a, b);
const x = {
foo: { bar: 3 },
array: [{
does: 'work',
too: [ 1, 2, 3 ]
}]
}
const y = {
foo: { baz: 4 },
quux: 5,
array: [{
does: 'work',
too: [ 4, 5, 6 ]
}, {
really: 'yes'
}]
}
var z = deepmerge({}, x, y);
var a = { a: 'oh', b: 'my', c: { a: 'a', b: { c: 'c' } } };
var b = { c: { b: { d: 'a' }, c: { d: 'd' } } };
var c = deepmergeTs({}, a, b);
const x = {
foo: { bar: 3 },
array: [{
does: 'work',
too: [ 1, 2, 3 ]
}]
}
const y = {
foo: { baz: 4 },
quux: 5,
array: [{
does: 'work',
too: [ 4, 5, 6 ]
}, {
really: 'yes'
}]
}
var z = deepmergeTs({}, x, y);
var a = { a: 'oh', b: 'my', c: { a: 'a', b: { c: 'c' } } };
var b = { c: { b: { d: 'a' }, c: { d: 'd' } } };
var c = tsDeepmerge({}, a, b);
const x = {
foo: { bar: 3 },
array: [{
does: 'work',
too: [ 1, 2, 3 ]
}]
}
const y = {
foo: { baz: 4 },
quux: 5,
array: [{
does: 'work',
too: [ 4, 5, 6 ]
}, {
really: 'yes'
}]
}
var z = tsDeepmerge({}, x, y);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
lodash | |
deepmerge | |
deepmerge-ts | |
ts-deepmerge |
Test name | Executions per second |
---|---|
lodash | 51656.7 Ops/sec |
deepmerge | 125391.1 Ops/sec |
deepmerge-ts | 96850.1 Ops/sec |
ts-deepmerge | 235644.9 Ops/sec |
Let's dive into the explanation of the benchmark.
Benchmark Overview
The benchmark compares the performance of four JavaScript libraries: Lodash, DeepMerge, DeepMerge-ts, and Ts-DeepMerge. The test cases are designed to merge two objects together, which is a common operation in JavaScript development.
Options Compared
The options compared are:
Pros and Cons
Here are some pros and cons of each library:
Test Cases
The benchmark consists of four test cases, each merging two objects together:
Each test case is executed 235,644 times (the number of executions per second), which provides a reasonable estimate of performance under heavy load.
Benchmark Results
The latest benchmark results show that:
These results indicate that DeepMerge and Ts-DeepMerge are the most efficient options for merging objects in JavaScript, while Lodash may be overkill due to its large bundle size.