From 0dec7c41eeae04d4eaa6c271fac08cd7c347f8de Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 26 Jan 2026 13:05:13 -0700
Subject: [PATCH] Add code splitting
---
app/blog/[slug]/page.tsx | 13 ++++++++++++-
app/layout.tsx | 10 +++++++++-
app/page.tsx | 42 +++++++++++++++++++++++++++++++++++-----
3 files changed, 58 insertions(+), 7 deletions(-)
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index ece8c43..a5571c1 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -1,15 +1,26 @@
import { notFound } from "next/navigation";
import type { Metadata } from "next";
+import dynamic from "next/dynamic";
import {
getBlogPostBySlug,
getAllBlogPosts as getAllPosts,
type BlogPost,
} from "../../../lib/content";
import ContentBanner from "../../components/ContentBanner";
-import RelatedArticles from "../../components/RelatedArticles";
import AskOrganizer from "../../components/AskOrganizer";
import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+// Code split RelatedArticles - blog-specific, below the fold
+const RelatedArticles = dynamic(
+ () => import("../../components/RelatedArticles"),
+ {
+ loading: () => (
+
+ ),
+ ssr: true,
+ },
+);
+
// AskOrganizer data - same as index page
const askOrganizerData = {
title: "Still have questions?",
diff --git a/app/layout.tsx b/app/layout.tsx
index f989716..c402578 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,18 @@
import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google";
import type { Metadata } from "next";
import type { ReactNode } from "react";
+import dynamic from "next/dynamic";
import "./globals.css";
-import Footer from "./components/Footer";
import ConditionalHeader from "./components/ConditionalHeader";
+// Code split Footer - below the fold, can be lazy loaded
+const Footer = dynamic(() => import("./components/Footer"), {
+ loading: () => (
+
+ ),
+ ssr: true, // Keep SSR for SEO
+});
+
const inter = Inter({
subsets: ["latin"],
weight: ["400", "500", "600", "700"],
diff --git a/app/page.tsx b/app/page.tsx
index 41d2fd0..f0c5c84 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,43 @@
-import NumberedCards from "./components/NumberedCards";
+import dynamic from "next/dynamic";
import HeroBanner from "./components/HeroBanner";
-import LogoWall from "./components/LogoWall";
-import RuleStack from "./components/RuleStack";
-import QuoteBlock from "./components/QuoteBlock";
-import FeatureGrid from "./components/FeatureGrid";
import AskOrganizer from "./components/AskOrganizer";
+// Code split below-the-fold components to reduce initial bundle size
+const LogoWall = dynamic(() => import("./components/LogoWall"), {
+ loading: () => (
+
+ ),
+ ssr: true,
+});
+
+const NumberedCards = dynamic(() => import("./components/NumberedCards"), {
+ loading: () => (
+
+ ),
+ ssr: true,
+});
+
+const RuleStack = dynamic(() => import("./components/RuleStack"), {
+ loading: () => (
+
+ ),
+ ssr: true,
+});
+
+const FeatureGrid = dynamic(() => import("./components/FeatureGrid"), {
+ loading: () => (
+
+ ),
+ ssr: true,
+});
+
+const QuoteBlock = dynamic(() => import("./components/QuoteBlock"), {
+ loading: () => (
+
+ ),
+ ssr: true,
+});
+
export default function Page() {
const heroBannerData = {
title: "Collaborate",