Reduce JavaScript work at startup

Why this matters

JavaScript takes time to download, parse, compile, and execute. Large startup tasks can delay rendering and make controls feel unresponsive, especially on constrained devices. An unused-code warning is a clue to inspect, not proof that a feature is safe to delete.

Find the cost and the feature

Use your production bundle report and browser Performance panel to connect large chunks or long tasks to a route and feature. Confirm which user actions need the code before changing load order.

Split optional features at a real boundary

Load a heavy feature when a user opens it or reaches the route that needs it. Keep essential navigation, validation, and visible controls available without waiting for an unrelated chunk.

async function openEditor() {
  const { mountEditor } = await import("./editor.js");
  mountEditor();
}

Remove dependencies deliberately

Check whether a library is duplicated, oversized for the feature used, or replaceable with a platform API. Remove it only after confirming no route, interaction, or browser support requirement depends on it.

Avoid blanket script deferral

`defer`, modules, and dynamic imports have different timing and dependency behavior. Preserve execution order for dependent scripts and test forms, menus, analytics consent, and other critical interactions.

For your setup

Check your work

• Build and measure the production version, not only a development server.
• Check startup transfer and long tasks on a representative mobile profile.
• Exercise every feature whose code moved or was removed.
• Compare INP field data over time when enough real-user data is available.