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

Run details:

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

Browser: Chrome 96

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
classnames	2189415.5 Ops/sec
clsx	2998715.8 Ops/sec
Obj-Str	3282073.8 Ops/sec
Template String	16721366.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