[docs-infra] Support turbopack for docs#48569
Open
brijeshb42 wants to merge 12 commits into
Open
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
Member
Janpot
left a comment
Janpot
left a comment
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
…ranslation Collapse the helper to operate on a single raw translation object. The caller no longer wraps in a require.context shim or a per-language map; it just passes the imported English JSON. The function mutates and returns the translation with `componentDescription` rendered to HTML and `componentDescriptionToc` populated. Breaking change for downstream consumers (mui-x). Coordinate the @mui/internal-core-docs publish with PR 3+4 once mui-x has migrated. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Update the ComponentApiBuilder template to statically import the
English translation JSON and call mapApiPageTranslation directly. The
{ en: ... } wrapper is constructed at the call site since ApiPage still
indexes descriptions by language. Webpack's require.context is gone and
the runtime markdown renderer stays out of the API page client bundle
because Next strips the import along with getStaticProps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- 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
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