Load heavy parts when they are needed

How to do it

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.

Example

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

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

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

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

How to check

Open the first screen with the network log on. No file from a route or widget that is not on screen is requested.