vercel · kdy1 · May 29, 2025 · May 28, 2025 · May 28, 2025 · May 28, 2025
diff --git a/.github/workflows/test-turbopack-rust-bench-test.yml b/.github/workflows/test-turbopack-rust-bench-test.yml
@@ -42,6 +42,10 @@ jobs:
           check-latest: true
       - run: corepack enable
 
+      # We need to install the dependencies for the benchmark apps
+      - run: pnpm install
+        working-directory: turbopack/benchmark-apps
+
       - name: Build benchmarks for tests
         timeout-minutes: 120
         run: |

diff --git a/.github/workflows/turbopack-benchmark.yml b/.github/workflows/turbopack-benchmark.yml
@@ -25,10 +25,13 @@ env:
   CARGO_INCREMENTAL: 0
   # For faster CI
   RUST_LOG: 'off'
+  TURBO_TEAM: 'vercel'
+  TURBO_CACHE: 'remote:rw'
+  TURBO_TOKEN: ${{ secrets.HOSTED_TURBO_TOKEN }}
 
 jobs:
-  benchmark-small:
-    name: Benchmark Rust Crates (small)
+  benchmark-tiny:
+    name: Benchmark Rust Crates (tiny)
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
@@ -50,6 +53,43 @@ jobs:
           run: cargo codspeed run
           token: ${{ secrets.CODSPEED_TOKEN }}
 
+  benchmark-small-apps:
+    name: Benchmark Rust Crates (small apps)
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Rust toolchain
+        uses: ./.github/actions/setup-rust
+
+      - name: Install cargo-codspeed
+        uses: taiki-e/install-action@v2
+        with:
+          tool: [email protected]
+
+      - name: Cache on ${{ github.ref_name }}
+        uses: ijjk/[email protected]
+        with:
+          save-if: 'true'
+          cache-provider: 'turbo'
+          shared-key: build-turbopack-benchmark-small-apps-${{ hashFiles('.cargo/config.toml') }}
+
+      - name: Install pnpm dependencies
+        working-directory: turbopack/benchmark-apps
+        run: |
+          npm i -g [email protected]
+          corepack enable
+          pnpm install --loglevel error
+
+      - name: Build app build benchmarks
+        run: cargo codspeed build -p turbopack-cli small_apps
+
+      - name: Run the benchmarks
+        uses: CodSpeedHQ/action@v3
+        with:
+          run: cargo codspeed run
+          token: ${{ secrets.CODSPEED_TOKEN }}
+
   benchmark-large:
     name: Benchmark Rust Crates (large)
     # If the task is triggered manually, we want to run the large benchmarks

diff --git a/turbopack/benchmark-apps/README.md b/turbopack/benchmark-apps/README.md
@@ -0,0 +1,3 @@
+# Benchmark Apps
+
+This directory contains apps that are used to benchmark the performance of Turbopack.
diff --git a/turbopack/benchmark-apps/date-fns-all/App.tsx b/turbopack/benchmark-apps/date-fns-all/App.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react'
+import * as DateFns from 'date-fns'
+
+console.log(DateFns)
+
+export default function Home() {
+  return <div>Benchmark</div>
+}
diff --git a/turbopack/benchmark-apps/date-fns-all/index.html b/turbopack/benchmark-apps/date-fns-all/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src-mui/index.tsx"></script>
+  </body>
+</html>
diff --git a/turbopack/benchmark-apps/date-fns-all/index.tsx b/turbopack/benchmark-apps/date-fns-all/index.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/turbopack/benchmark-apps/date-fns-single/App.tsx b/turbopack/benchmark-apps/date-fns-single/App.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { format } from 'date-fns'
+
+export default function Home() {
+  return <div>{format(new Date(), "'Today is a' eeee")}</div>
+}
diff --git a/turbopack/benchmark-apps/date-fns-single/index.html b/turbopack/benchmark-apps/date-fns-single/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src-mui/index.tsx"></script>
+  </body>
+</html>
diff --git a/turbopack/benchmark-apps/date-fns-single/index.tsx b/turbopack/benchmark-apps/date-fns-single/index.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/turbopack/benchmark-apps/framer-motion-all/App.tsx b/turbopack/benchmark-apps/framer-motion-all/App.tsx
@@ -0,0 +1,13 @@
+/* eslint-disable react/jsx-pascal-case */
+import * as React from 'react'
+import * as FramerMotion from 'framer-motion'
+
+console.log(FramerMotion)
+
+export default function Home() {
+  return (
+    <div>
+      <FramerMotion.motion.div animate={{ x: 0 }} />
+    </div>
+  )
+}
diff --git a/turbopack/benchmark-apps/framer-motion-all/index.html b/turbopack/benchmark-apps/framer-motion-all/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src-mui/index.tsx"></script>
+  </body>
+</html>
diff --git a/turbopack/benchmark-apps/framer-motion-all/index.tsx b/turbopack/benchmark-apps/framer-motion-all/index.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/turbopack/benchmark-apps/framer-motion-single/App.tsx b/turbopack/benchmark-apps/framer-motion-single/App.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+
+export default function Home() {
+  return (
+    <div>
+      <motion.div animate={{ x: 0 }} />
+    </div>
+  )
+}
diff --git a/turbopack/benchmark-apps/framer-motion-single/index.html b/turbopack/benchmark-apps/framer-motion-single/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src-mui/index.tsx"></script>
+  </body>
+</html>
diff --git a/turbopack/benchmark-apps/framer-motion-single/index.tsx b/turbopack/benchmark-apps/framer-motion-single/index.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/turbopack/benchmark-apps/joy/App.tsx b/turbopack/benchmark-apps/joy/App.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { Container, Typography, Box, Link } from '@mui/joy'
+import ProTip from './ProTip'
+
+function Copyright() {
+  return (
+    <Typography
+      textAlign="center"
+      sx={{
+        color: 'text.secondary',
+      }}
+    >
+      {'Copyright © '}
+      <Link href="https://mui.com/">Your Website</Link>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  )
+}
+
+export default function App() {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography level="h4" component="h1" sx={{ mb: 2 }}>
+          Material UI Vite.js example in TypeScript
+        </Typography>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  )
+}
diff --git a/turbopack/benchmark-apps/joy/ProTip.tsx b/turbopack/benchmark-apps/joy/ProTip.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { Link, Typography, SvgIcon, type SvgIconProps } from '@mui/joy'
+
+function LightBulbIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  )
+}
+
+export default function ProTip() {
+  return (
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
+      {'Pro tip: See more '}
+      <Link href="https://mui.com/material-ui/getting-started/templates/">
+        templates
+      </Link>
+      {' in the Material UI documentation.'}
+    </Typography>
+  )
+}
diff --git a/turbopack/benchmark-apps/joy/index.html b/turbopack/benchmark-apps/joy/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src-joy/index.tsx"></script>
+  </body>
+</html>
diff --git a/turbopack/benchmark-apps/joy/index.tsx b/turbopack/benchmark-apps/joy/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import { CssBaseline } from '@mui/joy'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <CssBaseline />
+    <App />
+  </React.StrictMode>
+)
diff --git a/turbopack/benchmark-apps/lucide-react-all/App.tsx b/turbopack/benchmark-apps/lucide-react-all/App.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import * as Icons from 'lucide-react'
+
+export default function Home() {
+  const dynamicName = 'Camera'
+  const Icon = Icons[dynamicName]
+  return (
+    <div>
+      <Icon />
+    </div>
+  )
+}
diff --git a/turbopack/benchmark-apps/lucide-react-all/index.html b/turbopack/benchmark-apps/lucide-react-all/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src-mui/index.tsx"></script>
+  </body>
+</html>
diff --git a/turbopack/benchmark-apps/lucide-react-all/index.tsx b/turbopack/benchmark-apps/lucide-react-all/index.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/turbopack/benchmark-apps/lucide-react-single/App.tsx b/turbopack/benchmark-apps/lucide-react-single/App.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Camera } from 'lucide-react'
+
+export default function Home() {
+  return (
+    <div>
+      <Camera />
+    </div>
+  )
+}
diff --git a/turbopack/benchmark-apps/lucide-react-single/index.html b/turbopack/benchmark-apps/lucide-react-single/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src-mui/index.tsx"></script>
+  </body>
+</html>
diff --git a/turbopack/benchmark-apps/lucide-react-single/index.tsx b/turbopack/benchmark-apps/lucide-react-single/index.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/turbopack/benchmark-apps/mui/App.tsx b/turbopack/benchmark-apps/mui/App.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Link from '@mui/material/Link'
+import ProTip from './components/ProTip'
+import Copyright from './components/Copyright'
+
+export default function Home() {
+  return (
+    <Container maxWidth="lg">
+      <Box
+        sx={{
+          my: 4,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+          Material UI - Next.js App Router example in TypeScript
+        </Typography>
+        <Link href="/about" color="secondary">
+          Go to the about page
+        </Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  )
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Benchmark Apps

		This directory contains apps that are used to benchmark the performance of Turbopack.