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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Browser: Chrome 110

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
classnames	2276532.0 Ops/sec
clsx	3165475.0 Ops/sec
Obj-Str	3124488.0 Ops/sec
Template String	19029090.0 Ops/sec
Template String with trim	11711810.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"}`
Template String with trim
let result = `bg-red-500 mx-4 py-3 ${condition ? "style-2" : "style-3"}`.trim()

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

Compare Classnames vs CLSX vs Obj-Str vs Template String

classnames

clsx

Obj-Str

Template String

Template String with trim