Benchmark: Classnames vs CLSX vs Alternatives (2)

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.2/index.min.js'></script>
<script src='https://unpkg.com/clsx@1.2.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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames	1510273.6 Ops/sec
clsx	2343439.5 Ops/sec
Array based	1672094.2 Ops/sec
String based (return struct)	2280024.2 Ops/sec
String based (if-else struct)	2230074.8 Ops/sec
Entries, filter, map, join	1982707.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares four different approaches to create a template string:

1. `classnames`
2. `clsx`
3. An own implementation using an array-based approach
4. A second implementation using a string-based approach with an if-else structure

**Classnames vs CLSX vs Alternatives (2)**

The benchmark is testing the performance of these four approaches on a specific test case that involves creating a template string from multiple values.

* `classnames` and `clsx` are external libraries, while the other two implementations are custom written by the user.
* The `classnames` library takes an array of strings, an object with style names as keys, and another array of style names, and returns a single string representing the class names.
* The `clsx` library has similar functionality to `classnames`, but it uses a different approach with a more functional programming style.
* The two custom implementations are:
	+ Array-based: This implementation uses an array to iterate over the values and build the template string. It's relatively simple and efficient, but may not be as readable or maintainable as other approaches.
	+ String-based (if-else): This implementation uses a more complex if-else structure to build the template string. It's more verbose than the array-based approach, but can provide better readability and maintainability.

**Benchmark Results**

The benchmark results show the performance of each approach across multiple executions per second. The fastest execution times are from the `clsx` library and the custom string-based implementation with an if-else structure, while the slowest execution times are from the array-based implementation and the external libraries (`classnames`).

In summary, the benchmark is testing the performance of four different approaches to create a template string, comparing their efficiency, readability, and maintainability. The results can help users choose the best approach for their specific use case.

**Key Takeaways**

* `clsx` library is one of the fastest approaches, followed closely by a custom implementation using an if-else structure.
* External libraries (`classnames`) are slower than custom implementations, especially when it comes to string manipulation.
* Array-based implementations can be inefficient and slow, while being easy to read and maintain.
* Readability and maintainability should not come at the cost of performance; consider trade-offs when choosing an approach.

Related benchmarks:

Classnames vs CLSX vs Alternatives (2) (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: Registered User

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>

Experimental features:

Fastest: N/A

Slowest: N/A

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