Load non-critical code on user interaction

Users should not pay the download, parse, and execution cost for features they may never use. Import-on-interaction shrinks initial JavaScript, reduces main-thread work during page load, and keeps the first view focused on content that matters immediately.

Quick Reference

• Move non-essential code behind clicks, focus, hovers, or explicit user actions
• Use dynamic import() so the code is absent from the initial route bundle
• Show immediate UI feedback while the deferred chunk loads
• Use this for chat widgets, editors, maps, filters, and export flows that are not needed on first paint

Check

Inspect this route or component for heavy modules, widgets, or third-party scripts that load on first render but are only needed after a user clicks, focuses, hovers, or opens a panel.

Fix

Move the non-critical dependency behind a user-triggered dynamic import(), add immediate loading feedback, and ensure the initial render still works without the deferred feature.