Benchmark: Classnames vs CLSX vs Alternatives 2024-05-20

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.5.2/index.min.js'></script>
<script src='https://unpkg.com/clsx@2.1.1/dist/clsx.min.js'></script>

Script Preparation code:

var str = 'style';
var obj = {
 	 'style-2': true,
  	 'style-3': false,
 	 'style-4': true,
}
var arr = ['style-5', 'style-6']

Tests:

classnames
let result = window.classNames(str, obj, arr, 'test classname')
clsx
let result = window.clsx(str, obj, arr, 'test classname')
Array based
function ts(...args){ let template = []; args.forEach(arg => { if (typeof arg === 'string') { template.push(arg); return; } if (arg.join) { template = [...template, ...arg]; return; } let entries = Object.entries(arg); if (entries.length) { entries.forEach(entry => { if(entry[1]) template.push(entry[0]) }) } }) return template.join(' '); } let result = ts(str, obj, arr, 'test classname')
String based (return struct)
function ts(...args){ let template = ''; args.forEach(arg => { if (typeof arg === 'string') { template += ' '+arg; return; } if (arg.join) { arg.forEach((e) => { template += ' ' + e; }) return; } let entries = Object.entries(arg); if (entries.length) { entries.forEach(entry => { if(entry[1]) template += ' ' + entry[0] }) } }) return template; } let result = ts(str, obj, arr, 'test classname')
String based (if-else struct)
function ts(...args){ let template = ''; args.forEach(arg => { if (typeof arg === 'string') { template += ' '+arg; } else if (arg.join) { arg.forEach((e) => { template += ' ' + e; }) } else { let entries = Object.entries(arg); if (entries.length) { entries.forEach(entry => { if(entry[1]) template += ' ' + entry[0] }) } } }) return template; } let result = ts(str, obj, arr, 'test classname')
Entries, filter, map, join
let objStyle = Object.entries(obj).filter((style)=>style[1]).map(style => style[0]).join(' '); let arrComb = arr.join(' ') let result = `${str} ${objStyle} ${arrComb} test classname`

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
Array based
String based (return struct)
String based (if-else struct)
Entries, filter, map, join

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 125 on Windows

View result in a separate tab

Test name	Executions per second
classnames	2254982.8 Ops/sec
clsx	2444437.5 Ops/sec
Array based	1716030.5 Ops/sec
String based (return struct)	2384289.8 Ops/sec
String based (if-else struct)	2387695.8 Ops/sec
Entries, filter, map, join	1995432.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Overview**

The benchmark compares four approaches to creating a template string:

1. `classnames` (a library)
2. `clsx` (another library)
3. An own implementation using an array-based approach
4. An own implementation using a string-based approach with if-else conditions

**Library: classNames and clsx**

* `classNames`: A popular utility library for creating class names.
	+ Pros: Well-maintained, widely used, and easy to use.
	+ Cons: Adds extra dependency, may have performance overhead due to string concatenation.
* `clsx`: Another utility library for creating class names, similar to classNames.
	+ Pros: Faster than classNames, uses a different approach that might be more efficient.
	+ Cons: Smaller user base compared to classNames.

**Array-Based Approach**

This implementation uses an array-based approach to create the template string. It iterates over each argument and appends it to the template string if it's a string or if it has a `join` method.

Pros:

* Lightweight, with minimal dependencies.
* Might be faster than the library approaches due to reduced function call overhead.

Cons:

* Requires manual iteration and condition checking, which can lead to errors.
* May not be as efficient for large inputs or complex template strings.

**String-Based Approach with If-Else Conditions**

This implementation uses a string-based approach with if-else conditions to create the template string. It checks each argument and appends it to the template string only if it's a string.

Pros:

* Easy to understand and maintain.
* Might be faster than the array-based approach due to reduced iteration overhead.

Cons:

* Adds more code complexity due to the use of if-else conditions.
* May have performance issues for large inputs or complex template strings.

**Entries, Filter, Map, Join Approach**

This implementation uses the `entries` method to iterate over an object's key-value pairs, filters out unwanted styles, maps the remaining styles to a string, and then joins them with other elements to create the final template string.

Pros:

* Easy to understand and maintain.
* Uses built-in JavaScript methods, which might be faster than custom implementations.

Cons:

* Requires manual filtering, mapping, and joining of objects, which can lead to errors.
* May not be suitable for large inputs or complex object structures.

**Benchmark Results**

The latest benchmark results show that the `clsx` library approach is the fastest, followed closely by the string-based approach with if-else conditions. The array-based approach is slower, while the Entries, filter, map, join approach is the slowest. However, it's essential to note that these results might not reflect your specific use case or environment.

In conclusion, the choice of approach depends on your project's requirements, performance considerations, and personal preference. If you need a lightweight solution with minimal dependencies, the array-based approach might be suitable. For a more efficient solution with built-in utility methods, the `clsx` library approach is likely a better choice.

Related benchmarks:

Classnames vs CLSX vs Alternatives 2024-05-20 (version: 0)

Compare CLSX vs Classnames vs an own implementation of creating a template string

Comparing performance of: classnames vs clsx vs Array based vs String based (return struct) vs String based (if-else struct) vs Entries, filter, map, join

Created: one year ago by: Guest

Jump to the latest result

classnames

clsx

Array based

String based (return struct)

String based (if-else struct)

Entries, filter, map, join

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):