Benchmark: Classnames vs CLSX vs Alternatives

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js'></script>
<script src='https://unpkg.com/clsx@1.1.0/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: 5 months ago)

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

Browser/OS: Chrome 142 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames	5156558.5 Ops/sec
clsx	11903754.0 Ops/sec
Array based	5708621.5 Ops/sec
String based (return struct)	10769444.0 Ops/sec
String based (if-else struct)	10744460.0 Ops/sec
Entries, filter, map, join	7381368.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares four approaches to create a template string from an object with various types of values:

1. `classnames`
2. `clsx`
3. An own implementation using Array-based approach
4. Another own implementation using String-based (return struct) approach
5. Another own implementation using String-based (if-else struct) approach
6. Using entries, filter, map, and join

**What's being tested**

The benchmark is testing the performance of each approach to create a template string. The input data includes an object with strings, booleans, and arrays.

**Options Compared**

Here's a summary of the options compared:

* `classnames` vs `clsx`: Both are popular libraries for creating class names dynamically.
	+ Pros: Well-maintained, widely used, easy to use.
	+ Cons: May have overhead due to external dependencies.
* Array-based approach vs String-based (return struct) approach:
	+ Array-based approach: Uses a loop to iterate over the input values and build the template string.
	+ String-based (return struct) approach: Uses a more concise syntax to build the template string using the `join` method.
	+ Pros: Generally faster, more concise.
	+ Cons: May be less readable for some developers.
* Array-based approach vs String-based (if-else struct) approach:
	+ Similar to the previous comparison, but with an additional conditional statement in the String-based approach.
	+ Pros: Provides more control over the build process.
	+ Cons: May be slower and less concise.
* Entries, filter, map, and join: Uses a functional programming style to create the template string.
	+ Pros: Concise, expressive, potentially faster due to optimized algorithms.
	+ Cons: May require additional setup or understanding of functional programming concepts.

**Benchmarks**

The latest benchmark results show that:

1. String-based (return struct) approach is the fastest.
2. Entries, filter, map, and join approach is also fast but slightly slower than the previous two approaches.
3. `clsx` library is slower than both own implementations using Array-based and String-based (if-else struct) approaches.
4. Array-based approach is slower than all other approaches.

Keep in mind that these results may vary depending on the specific use case, input data, and platform being used.

**Conclusion**

In conclusion, the benchmark highlights the importance of choosing an efficient approach to create template strings. The String-based (return struct) approach seems to be the fastest, followed closely by the Entries, filter, map, and join approach. Both own implementations using Array-based and `clsx` library are slower but still viable options depending on specific requirements.

Related benchmarks:

Classnames vs CLSX vs Alternatives (version: 2)

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

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