docs: update the benchmarks

merceyz · Sep 8, 2019 · 14c5df6 · 14c5df6
1 parent 1ab1eab
commit 14c5df6
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 64 deletions.
diff --git a/benchmark/README.md b/benchmark/README.md
@@ -1,27 +1,39 @@
 # Benchmarks
 
-Below are the benchmark results for `Node v11.14.0` and `clsx v1.0.4`.
+To run the benchmarks yourself use `yarn benchmark`
 
-To test these benchmarks yourself run `yarn benchmark`
+Case one and two are extracted from https://github.com/mui-org/material-ui
 
-Some of the cases are code extracted from https://github.com/mui-org/material-ui
+|            |        |
+| ---------- | ------ |
+| Node       | 12.9.0 |
+| clsx       | 1.0.4  |
+| classnames | 2.2.6  |
 
 # Results
 
+`N/A` means the function call was optimized away and no library was used
+
 ```
 # case_1.js - Extract properties, combine arguments, and conditional expression:
-  before x 725,714 ops/sec ±0.41% (92 runs sampled)
-  after  x 7,403,876 ops/sec ±0.33% (92 runs sampled)
+  before - classnames x 455,076 ops/sec ±0.29% (89 runs sampled)
+  before -    clsx    x 515,270 ops/sec ±0.24% (93 runs sampled)
+  after  - classnames x 2,147,313 ops/sec ±0.29% (94 runs sampled)
+  after  -    clsx    x 7,170,564 ops/sec ±0.66% (89 runs sampled)
 
 # case_2.js - Extract properties and combine arguments:
-  before x 402,253 ops/sec ±0.32% (92 runs sampled)
-  after  x 4,443,619 ops/sec ±1.53% (91 runs sampled)
+  before - classnames x 270,775 ops/sec ±0.48% (93 runs sampled)
+  before -    clsx    x 288,193 ops/sec ±0.25% (93 runs sampled)
+  after  - classnames x 1,644,390 ops/sec ±0.39% (94 runs sampled)
+  after  -    clsx    x 4,097,308 ops/sec ±0.63% (93 runs sampled)
 
-# case_3.js - String literals:
-  before x 7,271,738 ops/sec ±0.96% (92 runs sampled)
-  after  x 850,938,371 ops/sec ±0.25% (93 runs sampled)
+# case_3.js - Object with string literals:
+  before - classnames x 3,579,582 ops/sec ±0.38% (91 runs sampled)
+  before -    clsx    x 7,029,547 ops/sec ±0.58% (89 runs sampled)
+  after  -    N/A     x 851,510,031 ops/sec ±0.26% (92 runs sampled)
 
 # case_4.js - Unnecessary function calls:
-  before x 8,372,334 ops/sec ±0.49% (90 runs sampled)
-  after  x 853,523,303 ops/sec ±0.23% (92 runs sampled)
+  before - classnames x 4,771,703 ops/sec ±0.40% (92 runs sampled)
+  before -    clsx    x 8,444,230 ops/sec ±0.32% (89 runs sampled)
+  after  -    N/A     x 842,537,779 ops/sec ±0.26% (89 runs sampled)
 ```
diff --git a/benchmark/cases/case_1.js b/benchmark/cases/case_1.js
@@ -1,4 +1,3 @@
-const clsx = require('clsx');
 const getClassName = require('../getClassName');
 
 const classes = {
@@ -14,9 +13,9 @@ const classes = {
 const variant = 'buffer';
 const color = 'secondary';
 
-module.exports = [
-  'Extract properties, combine arguments, and conditional expression',
-  () => {
+module.exports = {
+  title: 'Extract properties, combine arguments, and conditional expression',
+  before(clsx) {
     return clsx(classes.bar, {
       [classes.barColorPrimary]: color === 'primary' && variant !== 'buffer',
       [classes.colorPrimary]: color === 'primary' && variant === 'buffer',
@@ -26,20 +25,22 @@ module.exports = [
       [classes.bar2Buffer]: variant === 'buffer',
     });
   },
-  () => {
+  after(clsx) {
     return clsx(
       classes.bar,
       (variant === 'indeterminate' || variant === 'query') && classes.bar2Indeterminate,
       variant === 'buffer'
         ? [
             classes.bar2Buffer,
-            color === 'primary' && classes.colorPrimary,
-            color === 'secondary' && classes.colorSecondary,
+            {
+              primary: classes.colorPrimary,
+              secondary: classes.colorSecondary,
+            }[color],
           ]
-        : [
-            color === 'primary' && classes.barColorPrimary,
-            color === 'secondary' && classes.barColorSecondary,
-          ],
+        : {
+            primary: classes.barColorPrimary,
+            secondary: classes.barColorSecondary,
+          }[color],
     );
   },
-];
+};
diff --git a/benchmark/cases/case_2.js b/benchmark/cases/case_2.js
@@ -1,4 +1,3 @@
-const clsx = require('clsx');
 const getClassName = require('../getClassName');
 
 const classes = {
@@ -25,9 +24,9 @@ const contained = false;
 const fullWidth = true;
 const disabled = false;
 
-module.exports = [
-  'Extract properties and combine arguments',
-  () => {
+module.exports = {
+  title: 'Extract properties and combine arguments',
+  before(clsx) {
     return clsx(
       classes.root,
       {
@@ -47,28 +46,38 @@ module.exports = [
       classNameProp,
     );
   },
-  () => {
+  after(clsx) {
     return clsx(
       classes.root,
       classNameProp,
       text && [
         classes.text,
-        color === 'primary' && classes.textPrimary,
-        color === 'secondary' && classes.textSecondary,
+        {
+          primary: classes.textPrimary,
+          secondary: classes.textSecondary,
+        }[color],
       ],
       contained && [
         classes.contained,
-        color === 'primary' && classes.containedPrimary,
-        color === 'secondary' && classes.containedSecondary,
-      ],
-      variant === 'outlined' && [
-        classes.outlined,
-        color === 'primary' && classes.outlinedPrimary,
-        color === 'secondary' && classes.outlinedSecondary,
+        {
+          primary: classes.containedPrimary,
+          secondary: classes.containedSecondary,
+        }[color],
       ],
       disabled && classes.disabled,
       fullWidth && classes.fullWidth,
-      color === 'inherit' && classes.colorInherit,
+      {
+        outlined: [
+          classes.outlined,
+          {
+            primary: classes.outlinedPrimary,
+            secondary: classes.outlinedSecondary,
+          }[color],
+        ],
+      }[variant],
+      {
+        inherit: classes.colorInherit,
+      }[color],
     );
   },
-];
+};
diff --git a/benchmark/cases/case_3.js b/benchmark/cases/case_3.js
@@ -1,15 +1,13 @@
-const clsx = require('clsx');
-
-module.exports = [
-  'String literals',
-  () => {
+module.exports = {
+  title: 'Object with string literals',
+  before(clsx) {
     return clsx({
       btn: true,
       'col-md-1': true,
       ['btn-primary']: true,
     });
   },
-  () => {
+  after() {
     return 'btn col-md-1 btn-primary';
   },
-];
+};
diff --git a/benchmark/cases/case_4.js b/benchmark/cases/case_4.js
@@ -1,17 +1,15 @@
-const clsx = require('clsx');
-
 const isDisabled = true;
 
-module.exports = [
-  'Unnecessary function calls',
-  () => {
+module.exports = {
+  title: 'Unnecessary function calls',
+  before(clsx) {
     return clsx({
       btn: true,
       'btn-foo': isDisabled,
       'btn-bar': !isDisabled,
     });
   },
-  () => {
+  after() {
     return 'btn ' + (isDisabled ? 'btn-foo' : 'btn-bar');
   },
-];
+};
diff --git a/benchmark/index.js b/benchmark/index.js
@@ -1,15 +1,27 @@
 const Benchmark = require('benchmark');
 const path = require('path');
 const fs = require('fs');
+const clsx = require('clsx');
+const classnames = require('classnames');
 
-function bench(name, description, before, after) {
-  console.log(`# ${name} - ${description}:`);
-  new Benchmark.Suite()
-    .add('before', before)
-    .add('after ', after)
-    .on('cycle', e => console.log('  ' + e.target))
-    .run();
-  console.log('');
+function bench(name, { title, before, after }) {
+  console.log(`\n# ${name} - ${title}:`);
+
+  const suite = new Benchmark.Suite();
+
+  suite.add('before - classnames', () => before(classnames));
+  suite.add('before -    clsx   ', () => before(clsx));
+
+  // If the argument length is 0 then the function call has been optimized away
+  if (after.length === 0) {
+    suite.add('after  -    N/A    ', after);
+  } else {
+    suite.add('after  - classnames', () => after(classnames));
+    suite.add('after  -    clsx   ', () => after(clsx));
+  }
+
+  suite.on('cycle', e => console.log('  ' + e.target));
+  suite.run();
 }
 
 const dir = path.join(__dirname, 'cases');
@@ -19,8 +31,9 @@ fs.readdir(dir, (err, files) => {
   }
 
   files.forEach(f => {
-    const c = require(path.join(dir, f));
+    const testCase = require(path.join(dir, f));
 
-    bench(f, ...c);
+    bench(f, testCase);
   });
+  console.log();
 });
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-tester": "^6.4.0",
     "benchmark": "^2.1.4",
+    "classnames": "^2.2.6",
     "clsx": "^1.0.4",
     "cross-env": "^5.2.0",
     "husky": "^3.0.0",

diff --git a/yarn.lock b/yarn.lock
@@ -1535,6 +1535,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 cliui@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"