Frontend Performance

Performance is a feature. If your app takes 3 seconds to load, users leave.

Bundle Optimization

JavaScript is the most expensive resource (Download + Parse + Execute).

1. Code Splitting

Don't send the Admin Dashboard code to the User.

• Route-based: Next.js does this automatically per page.
• Component-based: React.lazy() / dynamic imports for heavy modals.

2. Tree Shaking

Removing dead code.

• Tip: Import specific functions (import { map } from 'lodash/map') instead of the whole library.

3. Bundle Analysis

Use @next/bundle-analyzer or webpack-bundle-analyzer. It visualizes your JS. You will often find a massive library (like moment.js) that you didn't realize you included.