Benchmark: Classnames vs CLSX vs classNamesCurrent vs CLSXLite - strings only

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.5.1/index.min.js'></script>
<script src='https://unpkg.com/clsx@2.1.1/dist/clsx.min.js'></script>
<script>
  window.classNamesCurrent = (...classes) => {
    return classes.filter(Boolean).join(" ");
  };
</script>
<script>
window.clsxLite = (...args) => {
  let result = "";
  for (let i = 0; i < args.length; i++) {
    const value = args[i];
    if (value && typeof value === "string") {
      result += (result ? " " : "") + value;
    };
  };
  return result;
};
</script>

Script Preparation code:

var str = 'style';
var condition1 = true ? 'true-string-1' : 'false-string-1';
var condition2 = true && 'true-string-2';
var condition3 = false && 'false-string-3';

Tests:

classnames
let result = window.classNames(str, condition1, condition2, condition3, 'test classname')
clsx
let result = window.clsx(str, condition1, condition2, condition3, 'test classname')
classNames current
let result = window.classNamesCurrent(str, condition1, condition2, condition3, 'test classname')
clsx lite
let result = window.clsxLite(str, condition1, condition2, condition3, 'test classname')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
classNames current
clsx lite

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is comparing four different library approaches for string class naming:

1. `classnames`
2. `clsx`
3. `classNamesCurrent` (a variant of `classNames`)
4. `clsxLite`

These libraries are designed to simplify the process of applying classes to HTML elements based on certain conditions.

**Library Overview**

* `classnames`: A popular library for class names management, providing a simple and efficient way to apply classes to elements.
* `clsx`: A lightweight alternative to `classnames`, offering similar functionality with a smaller footprint.
* `classNamesCurrent`: An updated version of the original `classNames` library, designed to improve performance and handling of certain edge cases.
* `clsxLite`: A stripped-down version of `clsx`, optimized for even better performance.

**Benchmark Test Cases**

The benchmark consists of four test cases, each using a different library approach:

1. `classnames`: Uses the original `classnames` library to apply classes based on conditions.
2. `clsx`: Uses the `clsx` library to apply classes based on conditions.
3. `classNamesCurrent`: Uses the updated `classNamesCurrent` library to apply classes based on conditions, which includes improved performance and handling of edge cases.
4. `clsxLite`: Uses the optimized `clsxLite` library to apply classes based on conditions.

**Comparison**

The benchmark compares the performance of each library approach, measuring the number of executions per second for each test case.

**Pros and Cons**

* **classnames**: Pros: Widely adopted, well-maintained, and comprehensive feature set. Cons: Larger footprint compared to other libraries.
* **clsx**: Pros: Smaller footprint, faster execution times, and similar functionality to `classnames`. Cons: May lack some features or have a steeper learning curve.
* **classNamesCurrent**: Pros: Improved performance, handling of edge cases, and optimized for modern browsers. Cons: May require more updates or maintenance compared to other libraries.
* **clsxLite**: Pros: Optimized for extreme performance, lightweight footprint, but may sacrifice some features or functionality.

**Special JS Features**

None of the test cases explicitly use special JavaScript features like async/await, Promises, or Web Workers. If you're interested in testing these features, feel free to add them to your benchmark!

**Alternatives**

If you're looking for alternative libraries, consider:

* `lodash.classNames`: A comprehensive class names library with a wide range of features and a large community.
* `css-class-names`: A lightweight class names library with a focus on simplicity and performance.
* `js-classes`: A minimalist class names library with a small footprint and minimal dependencies.

Keep in mind that the choice of library ultimately depends on your project's specific needs, performance requirements, and developer preferences.

Latest run results:

Run details: (Test run date: 4 months ago)

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames	4380714.0 Ops/sec
clsx	4523916.0 Ops/sec
classNames current	3733945.8 Ops/sec
clsx lite	4629943.0 Ops/sec

Related benchmarks:

Classnames vs CLSX vs classNamesCurrent vs CLSXLite - strings only (version: 0)

Compare CLSX vs Classnames vs classNamesCurrent vs CLSXLite - strings only

Comparing performance of: classnames vs clsx vs classNames current vs clsx lite

Created: 4 months ago by: Registered User

Jump to the latest result

classnames

clsx

classNames current

clsx lite

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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