Skip to content

Commit 649c9c1

Browse files
owjs3901owjs3901
committed
Add bench
1 parent 3ca9f36 commit 649c9c1

33 files changed

+3567
-365
lines changed

‎benchmark.js‎

Lines changed: 31 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@ import { join } from 'node:path'
44
import { execSync } from 'child_process'
55

66
function clearBuildFile() {
7+
if (existsSync('./benchmark/next-stylex/.next'))
8+
rmSync('./benchmark/next-stylex/.next', {
9+
recursive: true,
10+
force: true,
11+
})
12+
if (existsSync('./benchmark/next-tailwind/.next'))
13+
rmSync('./benchmark/next-tailwind/.next', {
14+
recursive: true,
15+
force: true,
16+
})
717
if (existsSync('./benchmark/next-kuma-ui/.next'))
818
rmSync('./benchmark/next-kuma-ui/.next', {
919
recursive: true,
@@ -68,103 +78,27 @@ function checkDirSize(path) {
6878

6979
clearBuildFile()
7080

71-
performance.mark('kuma-ui-start')
72-
console.profile('kuma-ui')
73-
execSync('pnpm -F next-kuma-ui-benchmark build', {
74-
stdio: 'inherit',
75-
})
76-
console.profileEnd('kuma-ui')
77-
performance.mark('kuma-ui-end')
78-
performance.measure('kuma-ui', 'kuma-ui-start', 'kuma-ui-end')
79-
80-
performance.mark('panda-css-start')
81-
console.profile('panda-css')
82-
execSync('pnpm -F next-panda-css-benchmark build', {
83-
stdio: 'inherit',
84-
})
85-
console.profileEnd('panda-css')
86-
performance.mark('panda-css-end')
87-
performance.measure('panda-css', 'panda-css-start', 'panda-css-end')
88-
89-
performance.mark('chakra-ui-start')
90-
console.profile('chakra-ui')
91-
execSync('pnpm -F next-chakra-ui-benchmark build', {
92-
stdio: 'inherit',
93-
})
94-
console.profileEnd('chakra-ui')
95-
performance.mark('chakra-ui-end')
96-
performance.measure('chakra-ui', 'chakra-ui-start', 'chakra-ui-end')
97-
98-
performance.mark('mui-start')
99-
console.profile('mui')
100-
execSync('pnpm -F next-mui-benchmark build', {
101-
stdio: 'inherit',
102-
})
103-
console.profileEnd('mui')
104-
performance.mark('mui-end')
105-
performance.measure('mui', 'mui-start', 'mui-end')
106-
107-
performance.mark('devup-ui-start')
108-
console.profile('devup-ui')
109-
execSync('pnpm -F next-devup-ui-benchmark build', {
110-
stdio: 'inherit',
111-
})
112-
console.profileEnd('devup-ui')
113-
performance.mark('devup-ui-end')
114-
performance.measure('devup-ui', 'devup-ui-start', 'devup-ui-end')
115-
116-
performance.mark('devup-ui-single-start')
117-
console.profile('devup-ui-single')
118-
execSync('pnpm -F next-devup-ui-single-benchmark build', {
119-
stdio: 'inherit',
120-
})
121-
console.profileEnd('devup-ui-single')
122-
performance.mark('devup-ui-single-end')
123-
performance.measure(
124-
'devup-ui-single',
125-
'devup-ui-single-start',
126-
'devup-ui-single-end',
127-
)
128-
129-
console.info(performance.getEntriesByName('kuma-ui'))
130-
131-
console.info(
132-
'kuma-ui',
133-
checkDirSize('./benchmark/next-kuma-ui/.next').toLocaleString() + 'bytes',
134-
)
135-
136-
console.info(performance.getEntriesByName('panda-css'))
137-
138-
console.info(
139-
'panda-css',
140-
checkDirSize('./benchmark/next-panda-css/.next').toLocaleString() + 'bytes',
141-
)
142-
143-
console.info(performance.getEntriesByName('chakra-ui'))
144-
145-
console.info(
146-
'chakra-ui',
147-
checkDirSize('./benchmark/next-chakra-ui/.next').toLocaleString() + 'bytes',
148-
)
149-
150-
console.info(performance.getEntriesByName('mui'))
151-
152-
console.info(
153-
'mui',
154-
checkDirSize('./benchmark/next-mui/.next').toLocaleString() + 'bytes',
155-
)
156-
157-
console.info(performance.getEntriesByName('devup-ui'))
81+
function benchmark(target) {
82+
performance.mark(target + '-start')
83+
console.profile(target)
84+
execSync('pnpm -F next-' + target + '-benchmark build', {
85+
stdio: 'inherit',
86+
})
87+
console.profileEnd(target)
88+
performance.mark(target + '-end')
89+
performance.measure(target, target + '-start', target + '-end')
90+
return `${target} ${(performance.getEntriesByName(target)[0].duration / 1000).toFixed(2).toLocaleString()}s ${checkDirSize('./benchmark/next-' + target + '/.next').toLocaleString()} bytes`
91+
}
15892

159-
console.info(
160-
'devup-ui',
161-
checkDirSize('./benchmark/next-devup-ui/.next').toLocaleString() + 'bytes',
162-
)
93+
let result = []
16394

164-
console.info(performance.getEntriesByName('devup-ui-single'))
95+
result.push(benchmark('tailwind'))
96+
result.push(benchmark('stylex'))
97+
result.push(benchmark('kuma-ui'))
98+
result.push(benchmark('panda-css'))
99+
result.push(benchmark('chakra-ui'))
100+
result.push(benchmark('mui'))
101+
result.push(benchmark('devup-ui'))
102+
result.push(benchmark('devup-ui-single'))
165103

166-
console.info(
167-
'devup-ui-single',
168-
checkDirSize('./benchmark/next-devup-ui-single/.next').toLocaleString() +
169-
'bytes',
170-
)
104+
console.info(result.join('\n'))

‎benchmark/README.md‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎benchmark/next-mui/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"@emotion/styled": "^11.14.1",
1515
"@mui/material": "7.3.2",
1616
"next": "^15.5.3",
17-
"next-themes": "^0.4.6",
1817
"react": "^19.1.1",
1918
"react-dom": "^19.1.1",
2019
"react-icons": "^5.5.0"

‎benchmark/next-stylex/.babelrc.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
presets: ["next/babel"],
3+
plugins: [
4+
[
5+
"@stylexjs/babel-plugin",
6+
{
7+
dev: process.env.NODE_ENV === "development",
8+
test: process.env.NODE_ENV === "test",
9+
runtimeInjection: false,
10+
genConditionalClasses: true,
11+
treeshakeCompensation: true,
12+
unstable_moduleResolution: {
13+
type: "commonJS",
14+
rootDir: __dirname,
15+
},
16+
},
17+
],
18+
],
19+
};

‎benchmark/next-stylex/.eslintrc.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
extends: "next/core-web-vitals",
3+
plugins: ["@stylexjs"],
4+
rules: {
5+
// The Eslint rule still needs work, but you can
6+
// enable it to test things out.
7+
"@stylexjs/valid-styles": "error",
8+
},
9+
};

‎benchmark/next-stylex/.gitignore‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎benchmark/next-stylex/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
```
14+
15+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16+
17+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18+
19+
[http://localhost:3000/api/hello](http://localhost:3000/api/hello) is an endpoint that uses [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers). This endpoint can be edited in `app/api/hello/route.ts`.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎benchmark/next-stylex/__tests__/button.test.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as stylex from "@stylexjs/stylex";
2+
3+
import ThemeableButton from "../app/components/ThemeableButton";
4+
import renderer from "react-test-renderer";
5+
import React from "react";
6+
7+
describe("ThemeableButton", () => {
8+
it("renders default state", () => {
9+
const btn = renderer
10+
.create(<ThemeableButton onClick={() => {}}>ClickMe</ThemeableButton>)
11+
.toJSON();
12+
13+
expect(btn).toMatchInlineSnapshot(`
14+
<button
15+
className="ThemeableButton__styles.base"
16+
onClick={[Function]}
17+
>
18+
ClickMe
19+
</button>
20+
`);
21+
});
22+
});

‎benchmark/next-stylex/app/globals.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
* {
2+
box-sizing: border-box;
3+
padding: 0;
4+
margin: 0;
5+
}

‎benchmark/next-stylex/app/layout.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import './globals.css'
2+
3+
import type { Metadata } from 'next'
4+
5+
export const metadata: Metadata = {
6+
title: 'Create Next App',
7+
description: 'Generated by create next app',
8+
}
9+
10+
export default function RootLayout({
11+
children,
12+
}: Readonly<{
13+
children: React.ReactNode
14+
}>) {
15+
return (
16+
<html lang="en">
17+
<body>{children}</body>
18+
</html>
19+
)
20+
}

0 commit comments

Comments
 (0)