01 / Foundation
Understand the concept
Large JavaScript bundles increase download, parsing, and execution time, leading to slower page loads.
Bundle optimization focuses on shipping only the code users need by using techniques such as code splitting, tree shaking, lazy loading, and removing unused dependencies.
02 / Implementation
Dynamic Import
dynamic-import.tsx
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("./Chart"), {
loading: () => <p>Loading chart...</p>,
});
export default function Dashboard() {
return <Chart />;
}04 / Interview