[docs-infra] Support turbopack for docs#48569
Merged
Merged
Conversation
brijeshb42
added
the
scope: docs-infra
Deploy previewhttps://deploy-preview-48569--material-ui.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
brijeshb42
force-pushed
the
turbopack
branch
5 times, most recently
from
7c7ac52 to
834b7c7
Compare
Janpot
reviewed
May 26, 2026
Janpot
left a comment
Janpot
left a comment
Member
There was a problem hiding this comment.
Are there any changes to the bundles?
github-actions
Bot
added
the
PR: out-of-date
github-actions
Bot
removed
the
PR: out-of-date
brijeshb42
force-pushed
the
turbopack
branch
5 times, most recently
from
6b7836f to
ee2e87c
Compare
github-actions
Bot
added
the
PR: out-of-date
github-actions
Bot
removed
the
PR: out-of-date
brijeshb42
commented
Jun 5, 2026
| ); | ||
| } | ||
|
|
||
| MyApp.getInitialProps = createGetInitialProps({ |
Contributor
Author
There was a problem hiding this comment.
Not needed anymore.
brijeshb42
force-pushed
the
turbopack
branch
4 times, most recently
from
5e80c51 to
9bce265
Compare
Janpot
reviewed
Jun 8, 2026
| import './global.css'; | ||
|
|
||
| export { fontClasses } from '@mui/internal-core-docs/nextFonts'; | ||
| // Workaround: turbopack's pages-router Custom App detection misfires when |
Member
There was a problem hiding this comment.
If there's already an issue for this, link it as well
| const pkgContent = fs.readFileSync(path.resolve(workspaceRoot, 'package.json'), 'utf8'); | ||
| const pkg = JSON.parse(pkgContent); | ||
|
|
||
| // Shared alias list. Used by both turbopack (relative paths from `docs/`) |
Member
There was a problem hiding this comment.
Wouldn't "relative from docs/ be ../packages/mui-material/src?
|
|
||
| const webpackAliases: Record<string, string> = { | ||
| // Exact-match overrides (with the `$` suffix) for bare imports. | ||
| // Pin `@mui/material` to its compiled `index.js` and `@mui/icons-material` |
Member
There was a problem hiding this comment.
🤔 packages/mui-material/src/index.js is not the "compiled" index. Is this alias needed, why don't we need it for other packages? I know you didn't introduce, but since we're documenting, would like to be precise.
| ...nextConfig.experimental, | ||
| }, | ||
| eslint: { | ||
| ignoreDuringBuilds: true, |
Member
There was a problem hiding this comment.
We're going to start linting with next.js? or is it suppressed in another way?
Contributor
Author
There was a problem hiding this comment.
Its been removed from Next.js >=16. Gives warning since its now a deprecated field.
- Host: Brijeshs-MacBook-Pro.local (darwin arm64, 14 cores, 38.7 GB RAM) - Node: v24.14.0 - Next.js: 16.2.6 - Date: 2026-05-25 - Runs per metric: 10 (HMR: + 2 warmup discarded) - Component page: `/material-ui/react-button/` - HMR edit target: `docs/data/material/components/buttons/BasicButtons.js`. First `>WORD<` JSX text child rewritten to a fresh marker each run (cascade, no reset between runs). - HMR timing: `writeFile` → first `[Fast Refresh] done in Xms` console event seen in a headless Chrome tab (Playwright). | Metric | webpack (mean) | turbopack (mean) | turbopack vs webpack | |---|---:|---:|---:| | Cold prod build | 98.43 s | 36.03 s | **2.73× faster** | | Dev startup (process boot → `Ready in`) | 408 ms | 368 ms | 1.11× faster | | Home `/` cold first-load | 5.68 s | 4.77 s | 1.19× faster | | Component cold first-load | 2.06 s | 1.32 s | **1.56× faster** | | HMR — driver wall clock (edit → event) | 416 ms | 282 ms | **1.47× faster** | | HMR — bundler-reported (`Fast Refresh done in Xms`) | 402 ms | 111 ms | **3.64× faster** | | bundler | n | mean | stddev | min | median | p95 | max | |---|---:|---:|---:|---:|---:|---:|---:| | webpack | 10 | 98.43 s | 4.06 s | 93.40 s | 97.25 s | 108.51 s | 108.51 s | | turbopack | 10 | 36.03 s | 2.51 s | 32.16 s | 36.34 s | 39.20 s | 39.20 s | _turbopack mean **2.73× faster** than webpack._ <details><summary>raw samples (ms)</summary> - **webpack**: `97644, 96750, 93396, 101528, 108506, 97228, 96482, 97265, 97160, 98348` - **turbopack**: `32157, 32827, 33746, 35170, 35528, 37154, 37905, 38132, 38482, 39204` </details> | bundler | n | mean | stddev | min | median | p95 | max | |---|---:|---:|---:|---:|---:|---:|---:| | webpack | 10 | 408 ms | 90 ms | 350 ms | 372 ms | 642 ms | 642 ms | | turbopack | 10 | 368 ms | 15 ms | 354 ms | 367 ms | 403 ms | 403 ms | _turbopack mean **1.11× faster** than webpack._ <details><summary>raw samples (ms)</summary> - **webpack**: `642, 382, 464, 434, 356, 383, 359, 350, 362, 352` - **turbopack**: `362, 403, 371, 358, 356, 382, 356, 371, 354, 371` </details> | bundler | n | mean | stddev | min | median | p95 | max | |---|---:|---:|---:|---:|---:|---:|---:| | webpack | 10 | 5.68 s | 1.69 s | 4.74 s | 5.11 s | 10.41 s | 10.41 s | | turbopack | 10 | 4.77 s | 151 ms | 4.54 s | 4.74 s | 5.05 s | 5.05 s | _turbopack mean **1.19× faster** than webpack._ <details><summary>raw samples (ms)</summary> - **webpack**: `10412, 5940, 5449, 4992, 5071, 4966, 5139, 4927, 4737, 5198` - **turbopack**: `4728, 4873, 5054, 4847, 4695, 4542, 4882, 4753, 4594, 4704` </details> | bundler | n | mean | stddev | min | median | p95 | max | |---|---:|---:|---:|---:|---:|---:|---:| | webpack | 10 | 2.06 s | 742 ms | 1.68 s | 1.74 s | 3.85 s | 3.85 s | | turbopack | 10 | 1.32 s | 41 ms | 1.27 s | 1.32 s | 1.39 s | 1.39 s | _turbopack mean **1.56× faster** than webpack._ <details><summary>raw samples (ms)</summary> - **webpack**: `3849, 2973, 1775, 1749, 1680, 1685, 1726, 1710, 1690, 1764` - **turbopack**: `1277, 1385, 1315, 1326, 1289, 1266, 1350, 1349, 1375, 1295` </details> Real HMR via Playwright: edit demo file, observe the next `[Fast Refresh] done` console event in the open browser tab. | bundler | n | mean | stddev | min | median | p95 | max | |---|---:|---:|---:|---:|---:|---:|---:| | webpack | 10 | 416 ms | 48 ms | 341 ms | 421 ms | 482 ms | 482 ms | | turbopack | 10 | 282 ms | 57 ms | 212 ms | 290 ms | 358 ms | 358 ms | _turbopack mean **1.47× faster** than webpack._ <details><summary>raw samples (ms)</summary> - **webpack**: `453, 396, 448, 382, 446, 366, 482, 381, 463, 341` - **turbopack**: `358, 212, 319, 215, 328, 230, 336, 236, 329, 260` </details> Parses the `Xms` value printed by Next's Fast Refresh runtime — bundler-side recompile only, excludes WS round-trip and Playwright console plumbing. | bundler | n | mean | stddev | min | median | p95 | max | |---|---:|---:|---:|---:|---:|---:|---:| | webpack | 10 | 402 ms | 48 ms | 327 ms | 408 ms | 469 ms | 469 ms | | turbopack | 10 | 111 ms | 75 ms | 71 ms | 87 ms | 320 ms | 320 ms | _turbopack mean **3.64× faster** than webpack._ <details><summary>raw samples (ms)</summary> - **webpack**: `440, 382, 435, 369, 433, 353, 469, 366, 449, 327` - **turbopack**: `99, 74, 71, 77, 82, 91, 320, 99, 71, 121` </details>
Since the built docs' page loads more js chunks for turbopack, it'll be better for us to use turbopack for dev and webpack for prod builds
brijeshb42
force-pushed
the
turbopack
branch
2 times, most recently
from
69d1b2e to
8640695
Compare
Janpot
approved these changes
Jun 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A followup to #48370
TLDR: Even though we gain on prod build times with turbopack, it affects the end user experience with increased bundle size and slightly impacted page perf.
So, we should use it on dev for better DX and use webpack on prod to not impact the end-user experience.
Impact of moving prod build to turbopack
Perf compare — webpack vs turbopack (deploy previews)
Both targets on Netlify Edge:
Methodology: Playwright Chromium headless, fresh context per run, CDP
Network.setCacheDisabled, first-party only,domcontentloaded→load→ 300 ms, transferred bytes viaNetwork.loadingFinished.encodedDataLength. 5 runs/page, median reported.Summary
react-table(+1032 ms outlier, webpack LCP==FCP on that page suggests LCP candidate flickers between runs). Excluding table, LCP mean Δ ≈ +20 ms = noise. User-visible perf effectively no visible winner despite turbopack shipping more bytes — HTTP/2 + parallel fetch absorbs it on this network.See Raw Data
JS bytes (median, first-party)
CSS bytes (median, first-party)
Total bytes (median, first-party)
FCP / LCP (median, ms)
Gains on moving prod build to turbopack
Overall prod build on Netlfiy -
Previous - 5m45sec
New - 1m45sec
Bundler benchmark: webpack vs turbopack
/material-ui/react-button/docs/data/material/components/buttons/BasicButtons.js. First>WORD<JSX text child rewritten to a fresh marker each run (cascade, no reset between runs).writeFile→ first[Fast Refresh] done in Xmsconsole event seen in a headless Chrome tab (Playwright).Summary
Ready in)/cold first-loadFast Refresh done in Xms)See Raw Data
Cold prod build (
next build)turbopack mean 2.73× faster than webpack.
raw samples (ms)
97644, 96750, 93396, 101528, 108506, 97228, 96482, 97265, 97160, 9834832157, 32827, 33746, 35170, 35528, 37154, 37905, 38132, 38482, 39204Dev startup (process boot →
Ready in)turbopack mean 1.11× faster than webpack.
raw samples (ms)
642, 382, 464, 434, 356, 383, 359, 350, 362, 352362, 403, 371, 358, 356, 382, 356, 371, 354, 371Home
/cold first-loadturbopack mean 1.19× faster than webpack.
raw samples (ms)
10412, 5940, 5449, 4992, 5071, 4966, 5139, 4927, 4737, 51984728, 4873, 5054, 4847, 4695, 4542, 4882, 4753, 4594, 4704Component
/material-ui/react-button/cold first-loadturbopack mean 1.56× faster than webpack.
raw samples (ms)
3849, 2973, 1775, 1749, 1680, 1685, 1726, 1710, 1690, 17641277, 1385, 1315, 1326, 1289, 1266, 1350, 1349, 1375, 1295HMR — edit →
[Fast Refresh] done(driver wall clock)Real HMR via Playwright: edit demo file, observe the next
[Fast Refresh] doneconsole event in the open browser tab.turbopack mean 1.47× faster than webpack.
raw samples (ms)
453, 396, 448, 382, 446, 366, 482, 381, 463, 341358, 212, 319, 215, 328, 230, 336, 236, 329, 260HMR — bundler-reported (
[Fast Refresh] done in Xms)Parses the
Xmsvalue printed by Next's Fast Refresh runtime — bundler-side recompile only, excludes WS round-trip and Playwright console plumbing.turbopack mean 3.64× faster than webpack.
raw samples (ms)
440, 382, 435, 369, 433, 353, 469, 366, 449, 32799, 74, 71, 77, 82, 91, 320, 99, 71, 121