Add bench

README.md

@@ -76,14 +76,17 @@ npm install @devup-ui/webpack-plugin
 
 Next.js Build Time and Build Size (github action - ubuntu-latest)
 
-| Library               | Version  | Build Time | Build Size      |
-|-----------------------|----------|------------|-----------------|
-| kuma-ui               | 1.5.9    | 20,795s    | 65,195,899b     |
-| panda-css             | 1.3.1    | 21,474s    | 60,560,531b     |
-| chakra-ui             | 3.27.0   | 29,269s    | 200,421,009b    |
-| mui                   | 7.3.2    | 21,725s    | 90,287,991b     |
-| devup-ui              | 1.0.18   | 17,629s    | 55,709,618b     |
-| devup-ui(single mode) | 1.0.18   | 17,863s    | 55,693,887b     |
+| Library                  | Version  | Build Time | Build Size        |
+|--------------------------|----------|------------|-------------------|
+| tailwindcss              | 4.1.13   | 20.22s     | 57,415,796 bytes  |
+| styleX                   | 0.15.4   | 38.97s     | 76,257,820 bytes  |
+| vanilla-extract          | 1.17.4   | 20.09s     | 59,366,237 bytes  |
+| kuma-ui                  | 1.5.9    | 21.61s     | 67,422,085 bytes  |
+| panda-css                | 1.3.1    | 22.01s     | 62,431,065 bytes  |
+| chakra-ui                | 3.27.0   | 29.99s     | 210,122,493 bytes |
+| mui                      | 7.3.2    | 22.21s     | 94,231,958 bytes  |
+| devup-ui(per-file css)   | 1.0.18   | 18.23s     | 57,440,953 bytes  |
+| devup-ui(single css)     | 1.0.18   | 18.35s     | 57,409,008 bytes  |
 
 ## How it works
 

README_ko.md

@@ -70,14 +70,17 @@ npm install @devup-ui/vite-plugin
 
 Next.js Build Time and Build Size (github action - ubuntu-latest)
 
-| 라이브러리  |  버전    | 빌드 시간   | 빌드 사이즈        |
-|------------|---------|------------|------------------|
-| kuma-ui               | 1.5.9    | 20,795s    | 65,195,899b     |
-| panda-css             | 1.3.1    | 21,474s    | 60,560,531b     |
-| chakra-ui             | 3.27.0   | 29,269s    | 200,421,009b    |
-| mui                   | 7.3.2    | 21,725s    | 90,287,991b     |
-| devup-ui              | 1.0.18   | 17,629s    | 55,709,618b     |
-| devup-ui(single mode) | 1.0.18   | 17,863s    | 55,693,887b     |
+| 라이브러리                 |  버전    | 빌드 시간    | 빌드 사이즈        |
+|--------------------------|----------|------------|-------------------|
+| tailwindcss              | 4.1.13   | 20.22s     | 57,415,796 bytes  |
+| styleX                   | 0.15.4   | 38.97s     | 76,257,820 bytes  |
+| vanilla-extract          | 1.17.4   | 20.09s     | 59,366,237 bytes  |
+| kuma-ui                  | 1.5.9    | 21.61s     | 67,422,085 bytes  |
+| panda-css                | 1.3.1    | 22.01s     | 62,431,065 bytes  |
+| chakra-ui                | 3.27.0   | 29.99s     | 210,122,493 bytes |
+| mui                      | 7.3.2    | 22.21s     | 94,231,958 bytes  |
+| devup-ui(per-file css)   | 1.0.18   | 18.23s     | 57,440,953 bytes  |
+| devup-ui(single css)     | 1.0.18   | 18.35s     | 57,409,008 bytes  |
 
 ## 작동 원리
 

benchmark.js

@@ -4,6 +4,21 @@ import { join } from 'node:path'
 import { execSync } from 'child_process'
 
 function clearBuildFile() {
+  if (existsSync('./benchmark/next-stylex/.next'))
+    rmSync('./benchmark/next-stylex/.next', {
+      recursive: true,
+      force: true,
+    })
+  if (existsSync('./benchmark/next-vanilla-extract/.next'))
+    rmSync('./benchmark/next-vanilla-extract/.next', {
+      recursive: true,
+      force: true,
+    })
+  if (existsSync('./benchmark/next-tailwind/.next'))
+    rmSync('./benchmark/next-tailwind/.next', {
+      recursive: true,
+      force: true,
+    })
   if (existsSync('./benchmark/next-kuma-ui/.next'))
     rmSync('./benchmark/next-kuma-ui/.next', {
       recursive: true,
@@ -68,103 +83,28 @@ function checkDirSize(path) {
 
 clearBuildFile()
 
-performance.mark('kuma-ui-start')
-console.profile('kuma-ui')
-execSync('pnpm -F next-kuma-ui-benchmark build', {
-  stdio: 'inherit',
-})
-console.profileEnd('kuma-ui')
-performance.mark('kuma-ui-end')
-performance.measure('kuma-ui', 'kuma-ui-start', 'kuma-ui-end')
-
-performance.mark('panda-css-start')
-console.profile('panda-css')
-execSync('pnpm -F next-panda-css-benchmark build', {
-  stdio: 'inherit',
-})
-console.profileEnd('panda-css')
-performance.mark('panda-css-end')
-performance.measure('panda-css', 'panda-css-start', 'panda-css-end')
-
-performance.mark('chakra-ui-start')
-console.profile('chakra-ui')
-execSync('pnpm -F next-chakra-ui-benchmark build', {
-  stdio: 'inherit',
-})
-console.profileEnd('chakra-ui')
-performance.mark('chakra-ui-end')
-performance.measure('chakra-ui', 'chakra-ui-start', 'chakra-ui-end')
-
-performance.mark('mui-start')
-console.profile('mui')
-execSync('pnpm -F next-mui-benchmark build', {
-  stdio: 'inherit',
-})
-console.profileEnd('mui')
-performance.mark('mui-end')
-performance.measure('mui', 'mui-start', 'mui-end')
-
-performance.mark('devup-ui-start')
-console.profile('devup-ui')
-execSync('pnpm -F next-devup-ui-benchmark build', {
-  stdio: 'inherit',
-})
-console.profileEnd('devup-ui')
-performance.mark('devup-ui-end')
-performance.measure('devup-ui', 'devup-ui-start', 'devup-ui-end')
-
-performance.mark('devup-ui-single-start')
-console.profile('devup-ui-single')
-execSync('pnpm -F next-devup-ui-single-benchmark build', {
-  stdio: 'inherit',
-})
-console.profileEnd('devup-ui-single')
-performance.mark('devup-ui-single-end')
-performance.measure(
-  'devup-ui-single',
-  'devup-ui-single-start',
-  'devup-ui-single-end',
-)
-
-console.info(performance.getEntriesByName('kuma-ui'))
-
-console.info(
-  'kuma-ui',
-  checkDirSize('./benchmark/next-kuma-ui/.next').toLocaleString() + 'bytes',
-)
-
-console.info(performance.getEntriesByName('panda-css'))
-
-console.info(
-  'panda-css',
-  checkDirSize('./benchmark/next-panda-css/.next').toLocaleString() + 'bytes',
-)
-
-console.info(performance.getEntriesByName('chakra-ui'))
-
-console.info(
-  'chakra-ui',
-  checkDirSize('./benchmark/next-chakra-ui/.next').toLocaleString() + 'bytes',
-)
-
-console.info(performance.getEntriesByName('mui'))
-
-console.info(
-  'mui',
-  checkDirSize('./benchmark/next-mui/.next').toLocaleString() + 'bytes',
-)
-
-console.info(performance.getEntriesByName('devup-ui'))
+function benchmark(target) {
+  performance.mark(target + '-start')
+  console.profile(target)
+  execSync('pnpm -F next-' + target + '-benchmark build', {
+    stdio: 'inherit',
+  })
+  console.profileEnd(target)
+  performance.mark(target + '-end')
+  performance.measure(target, target + '-start', target + '-end')
+  return `${target} ${(performance.getEntriesByName(target)[0].duration / 1000).toFixed(2).toLocaleString()}s ${checkDirSize('./benchmark/next-' + target + '/.next').toLocaleString()} bytes`
+}
 
-console.info(
-  'devup-ui',
-  checkDirSize('./benchmark/next-devup-ui/.next').toLocaleString() + 'bytes',
-)
+let result = []
 
-console.info(performance.getEntriesByName('devup-ui-single'))
+result.push(benchmark('tailwind'))
+result.push(benchmark('stylex'))
+result.push(benchmark('vanilla-extract'))
+result.push(benchmark('kuma-ui'))
+result.push(benchmark('panda-css'))
+result.push(benchmark('chakra-ui'))
+result.push(benchmark('mui'))
+result.push(benchmark('devup-ui'))
+result.push(benchmark('devup-ui-single'))
 
-console.info(
-  'devup-ui-single',
-  checkDirSize('./benchmark/next-devup-ui-single/.next').toLocaleString() +
-    'bytes',
-)
+console.info(result.join('\n'))

benchmark/next-mui/next.config.mjs

@@ -1,5 +1 @@
-export default {
-  experimental: {
-    optimizePackageImports: ['@chakra-ui/react'],
-  },
-}
+export default {}

benchmark/next-mui/package.json

@@ -14,7 +14,6 @@
     "@emotion/styled": "^11.14.1",
     "@mui/material": "7.3.2",
     "next": "^15.5.3",
-    "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0"

benchmark/next-mui/src/app/page.tsx

@@ -18,10 +18,10 @@ export default function HomePage() {
       </p>
       <Box
         component="section"
+        data-testid="box"
         sx={{
           color,
           cursor: 'pointer',
-          dataTestId: 'box',
           fontSize: 32,
           position: 'relative',
           py: '28px',

benchmark/next-stylex/.babelrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    [
+      "@stylexjs/babel-plugin",
+      {
+        dev: process.env.NODE_ENV === "development",
+        test: process.env.NODE_ENV === "test",
+        runtimeInjection: false,
+        genConditionalClasses: true,
+        treeshakeCompensation: true,
+        unstable_moduleResolution: {
+          type: "commonJS",
+          rootDir: __dirname,
+        },
+      },
+    ],
+  ],
+};

benchmark/next-stylex/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: "next/core-web-vitals",
+  plugins: ["@stylexjs"],
+  rules: {
+    // The Eslint rule still needs work, but you can
+    // enable it to test things out.
+    "@stylexjs/valid-styles": "error",
+  },
+};

benchmark/next-stylex/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

benchmark/next-stylex/README.md

@@ -0,0 +1,36 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+[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`.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

benchmark/next-stylex/app/globals.css

@@ -0,0 +1,5 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}

benchmark/next-stylex/app/layout.tsx

@@ -0,0 +1,20 @@
+import './globals.css'
+
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}