Bundle 사이즈 최적화

frontend/package.json

@@ -10,12 +10,16 @@
     "dev": "webpack-dev-server --config webpack.dev.js --open",
     "tsc": "tsc --noEmit",
     "build": "webpack --mode production --config webpack.prod.js",
+    "build:report": "webpack-bundle-analyzer --port 8888 dist/bundle-stats.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint:style": "stylelint '**/style.ts' --fix"
   },
   "keywords": [],
   "author": "",
+  "sideEffects": [
+    "./src/routes/router.tsx"
+  ],
   "license": "ISC",
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -80,6 +84,7 @@
     "undici": "^6.19.2",
     "util": "^0.12.5",
     "webpack": "^5.92.1",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   },

frontend/src/components/Toast/Toast.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import * as S from './Toast.style';
 

frontend/src/routes/router.tsx

@@ -1,30 +1,45 @@
 import { ErrorBoundary } from '@sentry/react';
-import { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 
 import { Layout, LoadingFallback } from '@/components';
-import {
-  TemplatePage,
-  TemplateUploadPage,
-  SignupPage,
-  LoginPage,
-  LandingPage,
-  NotFoundPage,
-  TemplateExplorePage,
-  MyTemplatePage,
-} from '@/pages';
 
 import RouteGuard from './RouteGuard';
 import { END_POINTS } from './endPoints';
 
+const LandingPage = lazy(() => import('@/pages/LandingPage/LandingPage'));
+const TemplatePage = lazy(() => import('@/pages/TemplatePage/TemplatePage'));
+const TemplateUploadPage = lazy(() => import('@/pages/TemplateUploadPage/TemplateUploadPage'));
+const SignupPage = lazy(() => import('@/pages/SignupPage/SignupPage'));
+const LoginPage = lazy(() => import('@/pages/LoginPage/LoginPage'));
+const NotFoundPage = lazy(() => import('@/pages/NotFoundPage/NotFoundPage'));
+const TemplateExplorePage = lazy(() => import('@/pages/TemplateExplorePage/TemplateExplorePage'));
+const MyTemplatePage = lazy(() => import('@/pages/MyTemplatesPage/MyTemplatePage'));
+
+const CustomSuspense = ({ children }: { children: JSX.Element }) => (
+  <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+);
+
 const router = createBrowserRouter([
   {
-    errorElement: <NotFoundPage />,
-    element: <Layout />,
+    errorElement: (
+      <CustomSuspense>
+        <NotFoundPage />
+      </CustomSuspense>
+    ),
+    element: (
+      <CustomSuspense>
+        <Layout />
+      </CustomSuspense>
+    ),
     children: [
       {
         path: END_POINTS.HOME,
-        element: <LandingPage />,
+        element: (
+          <CustomSuspense>
+            <LandingPage />
+          </CustomSuspense>
+        ),
       },
       {
         path: END_POINTS.MY_TEMPLATES,
@@ -40,39 +55,57 @@ const router = createBrowserRouter([
       },
       {
         path: END_POINTS.TEMPLATES_EXPLORE,
-        element: <TemplateExplorePage />,
+        element: (
+          <CustomSuspense>
+            <TemplateExplorePage />
+          </CustomSuspense>
+        ),
       },
       {
         path: END_POINTS.TEMPLATE,
-        element: <TemplatePage />,
+        element: (
+          <CustomSuspense>
+            <TemplatePage />
+          </CustomSuspense>
+        ),
       },
       {
         path: END_POINTS.TEMPLATES_UPLOAD,
         element: (
           <RouteGuard isLoginRequired redirectTo={END_POINTS.LOGIN}>
-            <TemplateUploadPage />
+            <CustomSuspense>
+              <TemplateUploadPage />
+            </CustomSuspense>
           </RouteGuard>
         ),
       },
       {
         path: END_POINTS.SIGNUP,
         element: (
           <RouteGuard isLoginRequired={false} redirectTo={END_POINTS.HOME}>
-            <SignupPage />
+            <CustomSuspense>
+              <SignupPage />
+            </CustomSuspense>
           </RouteGuard>
         ),
       },
       {
         path: END_POINTS.LOGIN,
         element: (
           <RouteGuard isLoginRequired={false} redirectTo={END_POINTS.HOME}>
-            <LoginPage />
+            <CustomSuspense>
+              <LoginPage />
+            </CustomSuspense>
           </RouteGuard>
         ),
       },
       {
         path: '*',
-        element: <NotFoundPage />,
+        element: (
+          <CustomSuspense>
+            <NotFoundPage />
+          </CustomSuspense>
+        ),
       },
     ],
   },

frontend/webpack.common.js

@@ -84,5 +84,4 @@ module.exports = {
     },
     extensions: ['.tsx', '.ts', '.js'],
   },
-  devtool: 'source-map',
 };