Benchmark: Classnames 2.3.1 vs CLSX 1.1.1 vs Alternatives

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 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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the benchmark.

**Benchmark Overview**

The benchmark compares three different approaches to creating a template string:

1. **Classnames**: A popular JavaScript library for creating classes and conditionally applying them to objects.
2. **CLSX**: Another popular JavaScript library for creating classes and conditionally applying them to objects, similar to Classnames but with some differences in API and implementation.
3. **Custom Implementation**: An own implementation of creating a template string using JavaScript.

**Options Compared**

The benchmark compares the following options:

1. `classnames` (Classnames library)
2. `clsx` (CLSX library)
3. `Array based` (Custom implementation using array iteration)
4. `String based (return struct)` (Custom implementation using string concatenation and array manipulation)
5. `String based (if-else struct)` (Custom implementation using if-else statements and array manipulation)
6. `Entries, filter, map, join` (Custom implementation using Object.entries, filter, map, and join)

**Pros and Cons of Each Approach**

Here's a brief overview of the pros and cons of each approach:

1. **Classnames**:
	* Pros: Easy to use, well-maintained library with good performance.
	* Cons: May not be suitable for complex conditionals or large datasets.
2. **CLSX**:
	* Pros: Similar API to Classnames, but with some differences that might make it more suitable for certain use cases.
	* Cons: Smaller user base and less maintained compared to Classnames.
3. **Array based**:
	* Pros: Lightweight and easy to implement, can be used with small datasets.
	* Cons: May not be efficient for large datasets or complex conditionals.
4. **String based (return struct)**:
	* Pros: Easy to implement, can be efficient for small datasets.
	* Cons: May lead to performance issues with large datasets due to string concatenation overhead.
5. **String based (if-else struct)**:
	* Pros: Can be efficient for small datasets, easy to read and maintain.
	* Cons: May not be suitable for complex conditionals or large datasets due to performance issues.
6. **Entries, filter, map, join**:
	* Pros: Efficient for large datasets, can handle complex conditionals.
	* Cons: More complex implementation compared to other options.

**Benchmark Results**

The latest benchmark results show that the `String based (return struct)` approach performs best with a high number of executions per second (649387.375). The `Entries, filter, map, join` approach also shows good performance (593238.25), but it's slower than the first two options.

The `CLSX` library is slower compared to Classnames and custom implementations, likely due to its smaller user base and less maintained codebase.

Overall, the benchmark suggests that for most use cases, using a library like Classnames or CLSX might be a better choice than implementing a template string from scratch. However, if you need to optimize performance with large datasets, the `Entries, filter, map, join` approach might be a good option.

Related benchmarks:

Classnames 2.3.1 vs CLSX 1.1.1 vs Alternatives (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: 4 years 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>

Fastest: N/A

Slowest: N/A

No previous run results

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