perf/code-split

Dlaczego

Every kilobyte of JavaScript is downloaded, parsed and compiled before it helps, and the main thread is busy meanwhile: on mid-range phones that shows up as slow LCP and poor INP. A single bundle that holds the editor, the charts and the admin pages makes every visitor pay for all of them.

Poprawka

Let the framework split by route (Next.js, Nuxt, SvelteKit, Angular and Astro do it by default; React Router with lazy). Load heavy, rarely used parts on demand: const { Chart } = await import('./chart.js') on first open, React.lazy, Vue defineAsyncComponent, Angular @defer, Astro client:visible. Check the result with a bundle visualiser.

Przykłady

// good: the editor loads when someone opens it
openButton.addEventListener('click', async () => {
  const { mountEditor } = await import('./editor.js')
  mountEditor(container)
})

Źródła

• web.dev, Reduce JavaScript payloads with code splitting
• MDN, import() (dynamic import)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain perf/code-split