Description
The initial bundle size of the platform is slightly heavy because all global design elements, rich graphical components, animations, and filtering components are being bundled directly into the main chunk on the initial load. Pages like the dynamic dashboards do not require immediate parsing of every single sub-component (like tertiary modals, hidden custom dropdown lists, or animation states) right at the first paint.
Steps to Reproduce
- Open the network tab or run a Lighthouse/Web Vitals report on the production deployment.
- Notice the large chunk size being transferred on the initial document load before navigating into individual internal paths.
Technical Analysis & Solution
We can optimize this by leveraging Next.js dynamic imports (next/dynamic) to lazily load heavy modules, complex interactive charts, or conditional popups only when they are requested or triggered by user events.
- Fix: Refactor high-overhead layout containers to use code splitting.
- Result: This will drastically reduce the Time to Interactive (TTI) and First Contentful Paint (FCP) scores on the production build.
Description
The initial bundle size of the platform is slightly heavy because all global design elements, rich graphical components, animations, and filtering components are being bundled directly into the main chunk on the initial load. Pages like the dynamic dashboards do not require immediate parsing of every single sub-component (like tertiary modals, hidden custom dropdown lists, or animation states) right at the first paint.
Steps to Reproduce
Technical Analysis & Solution
We can optimize this by leveraging Next.js dynamic imports (
next/dynamic) to lazily load heavy modules, complex interactive charts, or conditional popups only when they are requested or triggered by user events.