Skip to content

Commit

Permalink
add benchmark documentation and blog post (vercel#2492)
Browse files Browse the repository at this point in the history
Co-authored-by: Anthony Shew <[email protected]>
Co-authored-by: Jared Palmer <[email protected]>
Co-authored-by: Maia Teegarden <[email protected]>
Co-authored-by: Will Binns-Smith <[email protected]>
Co-authored-by: Alex Kirszenberg <[email protected]>
Co-authored-by: Matt Pocock <[email protected]>
  • Loading branch information
7 people authored Oct 31, 2022
1 parent e89ffd6 commit f5ce4c9
Show file tree
Hide file tree
Showing 28 changed files with 2,526 additions and 93 deletions.
38 changes: 29 additions & 9 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
# Turborepo
# Contributing to Turbo

## Setup
Thanks for your interest in contributing to Turbo!

**Important note**: At the moment, Turbo is made up of two tools, Turborepo and Turbopack, built with different languages and toolchains. In the future, Turbo will become a single toolchain built on Rust and the Turbo engine. In the meantime, please follow the respective guide when contributing to each tool:

- [Contributing to Turborepo](#contributing-to-turborepo)
- [Contributing to Turbopack](#contributing-to-turbopack)

## Contributing to Turborepo

### Building Turborepo

Dependencies

Expand All @@ -12,7 +21,7 @@ Building
- Building `turbo` CLI: In `cli` run `make turbo`
- Using `turbo` to build `turbo` CLI: `./turbow.js`

## Testing
### Testing Turborepo

From the `cli/` directory, you can

Expand All @@ -21,10 +30,15 @@ From the `cli/` directory, you can

To run a single test, you can run `go test ./[path/to/package/]`. See more [in the Go docs](https://pkg.go.dev/cmd/go#hdr-Test_packages).

## Debugging
## Debugging Turborepo

1. Install `go install github.com/go-delve/delve/cmd/dlv@latest`
2. In VS Code's "Run and Debug" tab, select `Build Basic` to start debugging the initial launch of `turbo` against the `build` target of the Basic Example. This task is configured in [launch.json](./.vscode/launch.json).
1. In VS Code's "Run and Debug" tab, select `Build Basic` to start debugging the initial launch of `turbo` against the `build` target of the Basic Example. This task is configured in [launch.json](./.vscode/launch.json).

## Benchmarking Turborepo

1. Build Turborepo [as described above](#Setup)
1. From the `benchmark/` directory, run `pnpm run benchmark`.

## Updating `turbo`

Expand Down Expand Up @@ -57,15 +71,17 @@ To manually run a release:
3. Update `version.txt` (do not commit this change to git manually)
4. `cd cli && make publish`

# Turbo Tooling
## Contributing to Turbopack

`turbo-tooling` uses a [Cargo workspaces][workspaces] monorepo. You'll find
Turbopack uses [Cargo workspaces][workspaces] in the Turbo monorepo. You'll find
several workspaces inside the `crates/` directory. In order to run a particular
crate, you can use the `cargo run -p [CRATE_NAME]` command.

## Testing
### Testing Turbopack

Install `cargo-nextest` (https://nexte.st/):

Install `cargo-nextest` (https://nexte.st/)
`cargo install cargo-nextest`

Run via:

Expand All @@ -81,6 +97,10 @@ You can also create a little demo app and run
cargo run -p node-file-trace -- print demo/index.js
```

### Benchmarking Turbopack

See [the benchmarking README for Turbopack](crates/next-dev/benches/README.md) for details.

## Troubleshooting

See [Troubleshooting][].
Expand Down
45 changes: 45 additions & 0 deletions crates/next-dev/benches/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!--
IMPORTANT: This document is linked to from https://turbo.build
DO NOT rename this file without updating the link in docs/pages/pack/docs/benchmarks.mdx
-->

# Benchmarking Turbopack

The simplest way to run Turbopack's benchmark suite is with the command `cargo bench -p next-dev`. This will benchmark Turbopack's Next.js development server in a variety of scenarios and it's what we use to track Turbopack's performance over time.

`cargo bench -p next-dev` accepts different options via environment variables. To vary the number of modules tested, set `TURBOPACK_BENCH_COUNTS`. For example, to test against an app with 5,000 modules instead of the default 1,000, run

```sh
TURBOPACK_BENCH_COUNTS=5000 cargo bench -p next-dev
```

## Benchmarking Turbopack against other bundlers

The benchmark numbers we share on [the Turbopack website](https://turbo.build/pack) are informed by running Turbopack's benchmark suite against Turbopack and other bundlers. These are run in a controlled environment prior to being published. We use the `bench_startup` and `bench_hmr_to_eval` benchmarks currently (see below).

To run Turbopack benchmarks against other bundlers, run:

```sh
TURBOPACK_BENCH_BUNDLERS=all cargo bench -p next-dev
```

and optionally filter the benchmarks run to specific bundlers, such as:

```sh
TURBOPACK_BENCH_BUNDLERS=all cargo bench -p next-dev -- "hmr_to_eval/(Turbopack CSR|Vite)"
```

**Note**: The Turbopack benchmark suite includes a mix of server-side rendered and client-only rendered examples -- these are reflected in "CSR" or "SSR" in the benchmark name. Turbopack supports both, while some other bundlers only support client-rendered examples. Take that into account when comparing CSR results against SSR.

**Hint**: These benchmarks take a long time to complete, since they try to capture at least 10 samples for every scenario. There is a `TURBOPACK_BENCH_PROGRESS=1` env var to show values while the benchmarks are running.

## Benchmark Suite scenarios

The benchmark suite runs Turbopack and other bundlers in a variety of scenarios. The tests use a real headless browser and perform a variety of common scenarios in web development, and wait for results to be reflected in the page.

- **bench_startup:** Time from startup (without cache) until the app is rendered in the browser (it doesn't have to be interactive/hydrated for this.)
- **bench_hydration:** Time from startup (without cache) until the app is interactive in the browser (it needs to be hydrated for that.) This metric is not captured for CSR since the first render is interactive.
- **bench_hmr_to_eval:** Time from changing a file until the new code is evaluated in the browser. Evaluating the code does not mean the change is visible to the user yet. For instance, when a React component changes, it need to be re-rendered in the browser. This mostly measures the time spent computing the update in the bundler itself and sending it to the client.
- **bench_hmr_to_commit:** Time from changing a file until the change is reflected in the browser. We are using a `useEffect` hook within a React component to measure the time it takes for the updated React component to be committed to the DOM. This is a good measure of the end to end performance perceived by the user.
- **bench_startup_cache:** Time from startup with persistent cache until the app is rendered in the browser (it doesn't have to be interactive/hydrated for this.). Turbopack doesn't include a persistent cache yet. (This benchmark is disabled by default and can be enabled with `TURBOPACK_BENCH_CACHED=1`)
- **bench_hydration:** Time from startup with persistent cache until the app is interactive in the browser (it needs to be hydrated for that.) This metric is not captured for CSR since the first render is interactive. Turbopack doesn't include a persistent cache yet. (This benchmark is disabled by default and can be enabled with `TURBOPACK_BENCH_CACHED=1`)
2 changes: 1 addition & 1 deletion docs/components/Callout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function Callout({
}: {
children: ReactNode;
type: keyof typeof THEMES;
icon: ReactElement;
icon?: ReactElement;
}) {
return (
<div className={`${THEMES[type].classes} flex rounded-lg callout mt-6`}>
Expand Down
1 change: 1 addition & 0 deletions docs/components/image/ThemedImageFigure.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export function ThemedImageFigure(
"relative inline-block max-w-full overflow-hidden border-box text-[0px]",
{
"rounded-md": borderRadius,
"shadow-lg": shadow,
}
)}
>
Expand Down
19 changes: 19 additions & 0 deletions docs/components/pages/pack-home/PackBenchmarks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,25 @@ export const DEFAULT_BARS: BenchmarkBar[] = [
label: "Next.js 11",
},
];
export const HMR_BARS: BenchmarkBar[] = [
{
key: "next13",
label: "Next.js 13",
turbo: true,
},
{
key: "vite",
label: "Vite",
},
{
key: "next12",
label: "Next.js 12",
},
{
key: "next11",
label: "Next.js 11",
},
];

export function PackBenchmarks() {
const [numberOfModules, setNumberOfModules] =
Expand Down
90 changes: 32 additions & 58 deletions docs/components/pages/pack-home/benchmark-data/data.json
Original file line number Diff line number Diff line change
@@ -1,80 +1,54 @@
{
"cold": {
"1000": {
"next13": 0.868,
"vite": 4.8,
"next12": 3.4,
"next11": 7.7
"next13": 1.1252525,
"vite": 4.76572914,
"next12": 3.4092260955,
"next11": 7.73633697
},
"5000": {
"next13": 3.0,
"vite": 19.2,
"next12": 10.7,
"next11": 24.8
"next13": 3.55898876,
"vite": 19.18001276,
"next12": 10.66688052,
"next11": 24.78618103
},
"10000": {
"next13": 6.1,
"vite": 37.2,
"next12": 20.1,
"next11": 49.4
"next13": 7.4692269,
"vite": 37.2017471,
"next12": 20.05620067,
"next11": 49.37418728
},
"30000": {
"next13": 20.3,
"vite": 109.5,
"next12": 76.6,
"next11": 176.2
"next13": 22.3009127,
"vite": 109.52734199,
"next12": 76.55617539,
"next11": 176.18900858
}
},
"file_change": {
"1000": {
"next13": 0.015,
"vite": 0.087,
"next12": 0.134,
"next11": 0.201
"next13": 0.01528548,
"vite": 0.08654017,
"next12": 0.13393639,
"next11": 0.27323013
},
"5000": {
"next13": 0.027,
"vite": 0.093,
"next12": 0.386,
"next11": 0.85
"next13": 0.0165313,
"vite": 0.09254822,
"next12": 0.41555998,
"next11": 0.84880069
},
"10000": {
"next13": 0.015,
"vite": 0.11,
"next12": 1.067,
"next11": 1.714
"next13": 0.01575056,
"vite": 0.11038802,
"next12": 1.06711049,
"next11": 1.71389651
},
"30000": {
"next13": 0.015,
"vite": 0.256,
"next12": 3.4,
"next11": 6.9
}
},
"from_cache": {
"1000": {
"next13": 0.868,
"vite": 2.9,
"next12": 2.2,
"next11": 4.3
},
"5000": {
"next13": 3.0,
"vite": 11.5,
"next12": 7.2,
"next11": 12.9
},
"10000": {
"next13": 6.1,
"vite": 22.1,
"next12": 13.0,
"next11": 27.4
},
"30000": {
"next13": 20.3,
"vite": 66.3,
"next12": 42.5,
"next11": 31.8
"next13": 0.01513124,
"vite": 0.25617544,
"next12": 5.39863267,
"next11": 6.94377699
}
}
}
10 changes: 10 additions & 0 deletions docs/content/team.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,16 @@ const TURBO_TEAM = {
twitterUsername: "mattpocockuk",
picture: "/images/people/mattpocock.jpeg",
},
sokra: {
name: "Tobias Koppers",
twitterUsername: "wSokra",
picture: "/images/people/wsokra.jpg",
},
alexkirsz: {
name: "Alex Kirszenberg",
twitterUsername: "alexkirsz",
picture: "/images/people/alexkirsz.jpg",
},
};

export type Author = keyof typeof TURBO_TEAM;
Expand Down
1 change: 1 addition & 0 deletions docs/pages/blog/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"typesetting": "article"
}
},
"turbopack-benchmarks": "Turbopack Performance Benchmarks",
"turbo-1-6-0": "Turborepo 1.6",
"turbo-1-5-0": "Turborepo 1.5",
"turbo-1-4-0": "Turborepo 1.4",
Expand Down
Loading

0 comments on commit f5ce4c9

Please sign in to comment.