fix: 페이지 코드스플리팅

choooz · Oct 17, 2023 · 49fe9fa · 49fe9fa
1 parent 2caf462
commit 49fe9fa
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 28 deletions.
diff --git a/apps/jurumarble/src/app/drink-info/[id]/page.tsx b/apps/jurumarble/src/app/drink-info/[id]/page.tsx
@@ -1,15 +1,16 @@
 "use client";
 
-import BottomBar from "components/BottomBar";
+import dynamic from "next/dynamic";
 import React from "react";
-import DrinkCommentContainer from "./components/DrinkCommentContainer";
-import DrinkInfoContainer from "./components/DrinkInfoContainer";
+
+const DynamicDrinkInfoContainer = dynamic(() => import("./components/DrinkInfoContainer"));
+const DynamicDrinkCommentContainer = dynamic(() => import("./components/DrinkCommentContainer"));
 
 function DrinkInfoPage() {
   return (
     <>
-      <DrinkInfoContainer />
-      <DrinkCommentContainer />
+      <DynamicDrinkInfoContainer />
+      <DynamicDrinkCommentContainer />
     </>
   );
 }

diff --git a/apps/jurumarble/src/app/map/page.tsx b/apps/jurumarble/src/app/map/page.tsx
@@ -3,6 +3,7 @@
 import BottomBar from "components/BottomBar";
 import Header from "components/Header";
 import { KAKAO_MAP_API_KEY } from "lib/constants";
+import dynamic from "next/dynamic";
 import Script from "next/script";
 import React from "react";
 import MapContainer from "./components/MapContainer";
@@ -12,6 +13,9 @@ declare global {
     kakao: any;
   }
 }
+
+const DynamicMapContainer = dynamic(() => import("./components/MapContainer"));
+
 const MapPage = () => {
   return (
     <>
@@ -21,7 +25,7 @@ const MapPage = () => {
         src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_API_KEY}&libraries=services&autoload=false`}
       ></Script>
       <Header />
-      <MapContainer />
+      <DynamicMapContainer />
       <BottomBar />
     </>
   );

diff --git a/apps/jurumarble/src/app/my/page.tsx b/apps/jurumarble/src/app/my/page.tsx
@@ -1,15 +1,17 @@
-import BottomBar from "components/BottomBar";
-import Header from "components/Header";
-import UserInfoContainer from "./components/UseInfoContainer";
-import VoteListContainer from "./components/VoteListContainer";
+import dynamic from "next/dynamic";
+
+const DynamicHeader = dynamic(() => import("components/Header"));
+const DynamicUserInfoContainer = dynamic(() => import("./components/UseInfoContainer"));
+const DynamicVoteListContainer = dynamic(() => import("./components/VoteListContainer"));
+const DynamicBottomBar = dynamic(() => import("components/BottomBar"));
 
 function MyPage() {
   return (
     <>
-      <Header />
-      <UserInfoContainer />
-      <VoteListContainer />
-      <BottomBar />
+      <DynamicHeader />
+      <DynamicUserInfoContainer />
+      <DynamicVoteListContainer />
+      <DynamicBottomBar />
     </>
   );
 }

diff --git a/apps/jurumarble/src/app/page.tsx b/apps/jurumarble/src/app/page.tsx
@@ -3,9 +3,6 @@
 import BottomBar from "components/BottomBar";
 import Header from "components/Header";
 import styled, { css } from "styled-components";
-import Banner from "./main/components/Banner";
-import SearchInputWrapper from "./main/components/SearchInputWrapper";
-import TodayDrinkRecommendation from "./main/components/TodayDrinkRecommendation";
 import dynamic from "next/dynamic";
 
 const DynamicHotDrinkVoteContainer = dynamic(
@@ -23,14 +20,22 @@ const DynamicHotDrinkContainer = dynamic(() => import("./main/components/HotDrin
   ),
 });
 
+const DynamicTodayDrinkRecommendation = dynamic(
+  () => import("./main/components/TodayDrinkRecommendation"),
+);
+
+const DynamicSearchInputWrapper = dynamic(() => import("./main/components/SearchInputWrapper"));
+
+const DynamicBanner = dynamic(() => import("./main/components/Banner"));
+
 function MainPage() {
   return (
     <>
       <Header />
-      <TodayDrinkRecommendation />
+      <DynamicTodayDrinkRecommendation />
       <TopSection>
-        <Banner />
-        <SearchInputWrapper />
+        <DynamicBanner />
+        <DynamicSearchInputWrapper />
         <DynamicHotDrinkContainer />
       </TopSection>
       <DivideLine />

diff --git a/apps/jurumarble/src/app/vote/[id]/page.tsx b/apps/jurumarble/src/app/vote/[id]/page.tsx
@@ -3,14 +3,10 @@
 import styled, { css } from "styled-components";
 import VoteWriterBox from "./components/VoteWriterBox";
 import { DrinkCapacityHigh, DrinkCapacityLow, DrinkCapacityMedium } from "public/images";
-import VoteDescription from "./components/VoteDescription";
-import ChipContainer from "./components/ChipContainer";
-import CommentContainer from "./components/CommentContainer";
 import { useParams } from "next/navigation";
 import useVoteLoadService from "./services/useVoteLoadService";
 import useExecuteVoteService from "./services/useExecuteVoteService";
 import useFilteredStatisticsService from "./services/useFilterStatisticsService";
-import VoteAnalyzeBar from "./components/VoteAnalyzeBar";
 import { useMemo, useState } from "react";
 import useBookmarkService from "services/useBookmarkService";
 import Loading from "components/Loading";
@@ -21,6 +17,12 @@ import {
   VOTE_MBTI_LIST,
 } from "lib/constants";
 import VoteSmallSelectFilter from "./components/VoteSmallSelectFilter";
+import dynamic from "next/dynamic";
+
+const DynamicChipContainer = dynamic(() => import("./components/ChipContainer"));
+const DynamicVoteDescription = dynamic(() => import("./components/VoteDescription"));
+const DynamicCommentContainer = dynamic(() => import("./components/CommentContainer"));
+const DynamicVoteAnalyzeBar = dynamic(() => import("./components/VoteAnalyzeBar"));
 
 function Detail() {
   const params = useParams();
@@ -117,7 +119,7 @@ function Detail() {
         }}
       />
       <PageInner>
-        <ChipContainer
+        <DynamicChipContainer
           voteId={Number(data.voteId)}
           title={title}
           date={String(createdAt)}
@@ -128,7 +130,7 @@ function Detail() {
           postedUserId={data.postedUserId}
           select={select.choice}
         />
-        <VoteDescription
+        <DynamicVoteDescription
           imageA={imageA}
           imageB={imageB}
           percentageA={originalPercentageA}
@@ -145,7 +147,7 @@ function Detail() {
         />
         {!!select.choice && (
           <>
-            <VoteAnalyzeBar
+            <DynamicVoteAnalyzeBar
               totalCountA={totalCountA}
               totalCountB={totalCountB}
               percentageA={percentageA}
@@ -178,7 +180,7 @@ function Detail() {
           </>
         )}
 
-        <CommentContainer postId={Number(postId)} />
+        <DynamicCommentContainer postId={Number(postId)} />
       </PageInner>
     </Container>
   );