---
title: "Load heavy parts when they are needed · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/tests-and-budgets/split-heavy-code
updated: 2026-10-20
licence: "All rights reserved"
---

# Load heavy parts when they are needed

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Tests and budgets](https://agentwranglers.se/playbook/app-ui/tests-and-budgets)
- Rule: Load each route, and each widget over 20 kB compressed, such as a chart, an editor or a map, only when someone opens it.
- How: Split routes with dynamic `import()`, such as `React.lazy`, `defineAsyncComponent` in Vue or `@defer` in Angular. Load a widget when it scrolls into view or when its tab opens. Reserve its space with a placeholder of the same size. Before adding a dependency, check its compressed size, and prefer the platform, such as `Intl` instead of a date library.
- Check: Open the first screen with the network log on. No file from a route or widget that is not on screen is requested.

Example:

```tsx
const ReportsScreen = lazy(() => import('./reports/ReportsScreen'));
const RevenueChart = lazy(() => import('./charts/RevenueChart'));

<Suspense fallback={<ChartPlaceholder height={320} />}>
  <RevenueChart accountId={accountId} />
</Suspense>
```

```python
@app.get("/panels/revenue-chart")
def revenue_chart():
    series = revenue.monthly(current_user().account_id)
    return render_template("panels/_revenue_chart.html", series=series)
```

```html
<div class="chart-slot" hx-get="/panels/revenue-chart" hx-trigger="revealed" hx-swap="outerHTML"></div>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/tests-and-budgets/split-heavy-code`.

- Previous: [Give each route a size budget](https://agentwranglers.se/playbook/app-ui/tests-and-budgets/route-bundle-budget)
- [Tests and budgets](https://agentwranglers.se/playbook/app-ui/tests-and-budgets)