Run results for: Classnames vs CLSX vs Obj-Str vs Template String

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Browser: Chrome 108

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
classnames	1351388.6 Ops/sec
clsx	1754509.8 Ops/sec
Obj-Str	1886058.5 Ops/sec
Template String	10051885.0 Ops/sec

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.1/index.min.js'></script>
<script src='https://unpkg.com/clsx@1.1.1/dist/clsx.min.js'></script>
<script src='https://unpkg.com/obj-str@1.1.0/dist/obj-str.min.js'></script>

Script Preparation code:

var condition = !!"asdf";

Tests:

classnames
let result = window.classNames('bg-red-500 mx-4 py-3', { 'style-2': condition, 'style-3': !condition })
clsx
let result = window.clsx('bg-red-500 mx-4 py-3', { 'style-2': condition, 'style-3': !condition })
Obj-Str
let result = window.objstr({'bg-red-500 mx-4 py-3': true, 'style-2': condition, 'style-3': !condition })
Template String
let result = `bg-red-500 mx-4 py-3 ${condition ? "style-2" : "style-3"}`

Run results for: Classnames vs CLSX vs Obj-Str vs Template String

Compare Classnames vs CLSX vs Obj-Str vs Template String

classnames

clsx

Obj-Str

Template String