Run results for: lodash merge vs deepmerge vs simple clone function (multiple style objects)

Test name	Executions per second
✓ simpleDeepClone	753,415 Ops/sec
lodash merge	225,487 Ops/sec
deepmerge.all	173,415 Ops/sec

Script Preparation code:

const objects = [
  {},
  {
    color: "rgb(25, 67, 50)",
    width: "134.391px",
    height: "36px",
    fontSize: "34px",
    fontStyle: "normal",
    textAlign: "center",
    fontFamily: "Avenir",
    fontWeight: "bold",
    lineHeight: "36px",
    letterSpacing: "0em",
    textDecoration: "none",
    textAlignLast: "center",
    flexShrink: 0,
    flexBasis: "auto",
    overflowY: "hidden",
    transition: "inherit",
    "&:hover": {
      color: "#ccc",
      width: "130px",
      height: "50px",
    },
    "@media (max-width: 640px)": {
      textAlignLast: "center",
      flexShrink: 0,
      flexBasis: "auto",
      overflowY: "hidden",
      transition: "inherit",
      "&:hover": {
        color: "#ddd",
        width: "160px",
        height: "60px",
        flexShrink: 1,
      },
    },
    "@media (min-width: 641px) and (max-width: 820px)": {
      textAlignLast: "center",
      flexShrink: 0,
      flexBasis: "auto",
      overflowY: "hidden",
      transition: "inherit",
    },
  },
  {
    overflowWrap: "break-word",
    "&:hover": {
      color: "#fff",
    },
    "@media (max-width: 640px)": {
      color: "green",
      flexShrink: 1,
      "&:hover": {
        color: "#cecece",
        flexShrink: 0,
        gap: "5px",
      },
    },
    "@media (min-width: 641px) and (max-width: 820px)": {
      fontStyle: "italic",
      textAlignLast: "both",
    },
  },
];

window.OBJECTS = objects;
window.simpleDeepClone = simpleDeepClone;

function simpleDeepClone(...objects) {
  return objects.reduce((acc, obj) => {
    for (const key in obj) {
      const value = obj[key];
      if (typeof value === "object" && value !== null) {
        acc[key] = simpleDeepClone(acc[key] || {}, value);
      } else {
        acc[key] = value;
      }
    }
    return acc;
  }, {});
}

Run results for: lodash merge vs deepmerge vs simple clone function (multiple style objects)

lodash merge

deepmerge.all

simpleDeepClone