1.2 KiB
Tip #32 — Code-split heavy components on the recipe page
Date: 2026-07-13
Category: performance
Source: MC-Survival Wiki Daily Tip (backfilled from state.json)
Code-split heavy components on the recipe page
Wrap the heaviest sub-components on the recipe detail page — the crafting grid, the item picker, and the image upload — in React.lazy with a Suspense fallback, so they ship as separate JS chunks loaded on demand. It solves the slowest-page-on-the-wiki problem, where users wait for three heavy widgets to download even when they only need the recipe text. The signal is bundle composition: a quick look at the build output shows these three components account for the majority of the route's JS, and they are only needed for specific interactions. Preloading on hover or intent is the second-order win — the chunk is ready by the time the user clicks.
Implementation tips
- Use React.lazy + Suspense for the 3 heavy components above. The shell renders immediately.
- Preload on hover/intent: when user hovers a recipe card, start fetching the chunk for that page.
- Bundle analyzer (rollup-plugin-visualizer) — measure first, split second.