LLM Best Practices

Code splitting

Last updated 1 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

Code splitting ships several chunks instead of one bundle, using dynamic import() so the browser downloads only what the current route or interaction needs. Split at route boundaries first (Next.js does this automatically), then lazy-load heavy components that most visitors never open, such as editors, charts, and maps.

Rules

  • In React, pair React.lazy(() => import("./X")) with a suspense-boundary. In Next.js, next/dynamic wraps both for Client Components.
  • Do not split tiny components; extra requests create waterfalls that cost more than they save. Measure with a bundle analyzer before and after.
  • Stable vendor chunks keep cache hits when app code changes.
  • Split chunks still hydrate on the client (hydration).
const ChartEditor = React.lazy(() => import("./ChartEditor"))
 
<Suspense fallback={<Spinner />}>
  <ChartEditor />
</Suspense>

Backlinks