15 lines
1.2 KiB
Markdown
15 lines
1.2 KiB
Markdown
# Tip #6 — Move mc-items.json out of the critical path
|
|
|
|
**Date:** 2026-06-17
|
|
**Category:** performance
|
|
**Source:** MC-Survival Wiki Daily Tip (backfilled from state.json)
|
|
## Move mc-items.json out of the critical path
|
|
|
|
Move the 135KB mc-items.json file behind a TanStack Query server function with staleTime: Infinity and long-lived HTTP cache headers, so the browser downloads it once and reuses the cached copy across visits. It solves a measurable LCP and time-to-interactive hit: that JSON is currently fetched on every page, blocking the first paint. The signal is hard data — a 135KB blocking resource is the single largest performance offender on the recipe pages, and the existing item-picker only needs the data when the user actually opens the picker. Hydrating the result into a Zustand store or React context means downstream components can read items synchronously without re-fetching.
|
|
|
|
## Implementation tips
|
|
|
|
1. Move it behind a TanStack Query server function with staleTime: Infinity and HTTP cache headers (immutable, 1y).
|
|
2. Hydrate into a Zustand store or React context once, then items are sync-accessible everywhere.
|
|
3. For the item-picker specifically, lazy-load the JSON only when the picker is opened, not on page mount.
|