코드 성능 최적화 (번들 최적화, 코드스플리팅, 트리쉐이킹)

apps/jurumarble/next.config.js

@@ -1,4 +1,8 @@
 console.log("START");
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   swcMinify: true,
@@ -27,4 +31,9 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = (_phase) => {
+  const plugins = [withBundleAnalyzer];
+  return plugins.reduce((acc, plugin) => plugin(acc), {
+    ...nextConfig,
+  });
+};

apps/jurumarble/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "analyze": "ANALYZE=true yarn build",
     "start": "next start",
     "lint": "next lint",
     "gen": "svgr --index-template src/assets/icons/templates/indexTemplate.cjs  --config-file src/assets/icons/config/basic.config.cjs",
@@ -15,6 +16,7 @@
     "@emotion/is-prop-valid": "^1.2.1",
     "@monorepo/hooks": "workspace:*",
     "@monorepo/ui": "workspace:*",
+    "@next/bundle-analyzer": "13.3.5-canary.9",
     "@react-hookz/web": "^23.1.0",
     "@tanstack/react-query": "^4.33.0",
     "@tanstack/react-query-devtools": "^4.33.0",

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 />
     </>
   );
 }

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 />
     </>
   );

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 />
     </>
   );
 }

apps/jurumarble/src/app/page.tsx

@@ -3,25 +3,44 @@
 import BottomBar from "components/BottomBar";
 import Header from "components/Header";
 import styled, { css } from "styled-components";
-import Banner from "./main/components/Banner";
-import HotDrinkContainer from "./main/components/HotDrinkContainer";
-import HotDrinkVoteContainer from "./main/components/HotDrinkVoteContainer";
-import SearchInputWrapper from "./main/components/SearchInputWrapper";
-import TodayDrinkRecommendation from "./main/components/TodayDrinkRecommendation";
+import dynamic from "next/dynamic";
+
+const DynamicHotDrinkVoteContainer = dynamic(
+  () => import("./main/components/HotDrinkVoteContainer"),
+);
+
+const DynamicHotDrinkContainer = dynamic(() => import("./main/components/HotDrinkContainer"), {
+  ssr: false,
+  loading: () => (
+    <div
+      style={{
+        height: "200px",
+      }}
+    />
+  ),
+});
+
+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 />
-        <HotDrinkContainer />
+        <DynamicBanner />
+        <DynamicSearchInputWrapper />
+        <DynamicHotDrinkContainer />
       </TopSection>
       <DivideLine />
       <BottomSection>
-        <HotDrinkVoteContainer />
+        <DynamicHotDrinkVoteContainer />
       </BottomSection>
       <BottomBar />
     </>