feat: 코드 스플리팅 적용

src/pages/ArticleDetailPage.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { BsTrash } from 'react-icons/bs';
 import { FiEdit } from 'react-icons/fi';
+import LoadingPage from '@/pages/LoadingPage';
 import ArticleDetail from '@components/ArticleDetail';
 import ArticleInfoIcon from '@components/ArticleInfoIcon';
 import BackButton from '@components/BackButton';
@@ -16,7 +17,6 @@ import { useNotification } from '@hooks/useNotification';
 import { useToastContext } from '@hooks/useToastContext';
 import CommentInput from './ArticleDetailPage/CommentInput';
 import Comments from './ArticleDetailPage/Comments';
-import { LoadingPage } from '.';
 
 const ArticleDetailPage = () => {
   const navigate = useNavigate();

src/pages/LandingPage.tsx

@@ -1,7 +1,7 @@
 import { useNavigate, Navigate } from 'react-router-dom';
 import MainButton from '@/components/MainButton';
 import useAuthQuery from '@/hooks/useAuthQuery';
-import { LoadingPage } from '@pages/index';
+import LoadingPage from '@/pages/LoadingPage';
 
 const LOGO_SRC = '/img/logo.svg';
 const CHARACTER_SRC = '/img/character.webp';

src/pages/ProtectedRouter.tsx

@@ -3,7 +3,7 @@ import { Navigate } from 'react-router-dom';
 import { TOAST_MESSAGES } from '@/constants/Messages';
 import useAuthQuery from '@/hooks/useAuthQuery';
 import { useToastContext } from '@/hooks/useToastContext';
-import { LoadingPage } from '.';
+import LoadingPage from '@/pages/LoadingPage';
 
 const ProtectedRouter = ({ children }: { children: ReactNode }) => {
   const { showToast } = useToastContext();

src/pages/index.ts

@@ -1,16 +1,16 @@
 export { default as HomePage } from './HomePage';
 export { default as LandingPage } from './LandingPage';
-export { default as LoginPage } from './LoginPage';
-export { default as NewArticlePage } from './NewArticlePage';
-export { default as NotFoundPage } from './NotFoundPage';
-export { default as NotificationPage } from './NotificationPage';
-export { default as ArticlesPage } from './ArticlesPage';
-export { default as ArticleDetailPage } from './ArticleDetailPage';
-export { default as ProfilePage } from './ProfilePage';
-export { default as SearchPage } from './SearchPage';
-export { default as SignUpPage } from './SignupPage';
-export { default as ProfileEditPage } from './ProfileEditPage';
-export { default as ChangePasswordPage } from './ChangePasswordPage';
-export { default as LoadingPage } from './LoadingPage';
-export { default as ProtectedRouter } from './ProtectedRouter';
-export {default as ArticleEditPage} from './ArticleEditPage';
+// export { default as LoginPage } from './LoginPage';
+// export { default as NewArticlePage } from './NewArticlePage';
+// export { default as NotFoundPage } from './NotFoundPage';
+// export { default as NotificationPage } from './NotificationPage';
+// export { default as ArticlesPage } from './ArticlesPage';
+// export { default as ArticleDetailPage } from './ArticleDetailPage';
+// export { default as ProfilePage } from './ProfilePage';
+// export { default as SearchPage } from './SearchPage';
+export { default as SignUpPage } from './SignUpPage';
+// export { default as ProfileEditPage } from './ProfileEditPage';
+// export { default as ChangePasswordPage } from './ChangePasswordPage';
+// export { default as LoadingPage } from './LoadingPage';
+// export { default as ProtectedRouter } from './ProtectedRouter';
+// export { default as ArticleEditPage } from './ArticleEditPage';

src/utils/Router.tsx

@@ -1,23 +1,39 @@
+/* eslint-disable react-refresh/only-export-components */
+import { lazy } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import App from '@/App';
 import {
   HomePage,
   LandingPage,
-  NotFoundPage,
+  // NotFoundPage,
   SignUpPage,
-  SearchPage,
-  ProfilePage,
-  LoginPage,
-  NewArticlePage,
-  ArticleDetailPage,
-  NotificationPage,
-  ArticlesPage,
-  ProfileEditPage,
-  ChangePasswordPage,
-  ProtectedRouter,
-  ArticleEditPage,
+  // SearchPage,
+  // ProfilePage,
+  // LoginPage,
+  // NewArticlePage,
+  // ArticleDetailPage,
+  // NotificationPage,
+  // ArticlesPage,
+  // ProfileEditPage,
+  // ChangePasswordPage,
+  // ProtectedRouter,
+  // ArticleEditPage,
 } from '@pages/index';
 
+// const SignUpPage = lazy(() => import('@/pages/SignUpPage'));
+const SearchPage = lazy(() => import('@/pages/SearchPage'));
+const ProfilePage = lazy(() => import('@/pages/ProfilePage'));
+const NotFoundPage = lazy(() => import('@/pages/NotFoundPage'));
+const LoginPage = lazy(() => import('@/pages/LoginPage'));
+const NewArticlePage = lazy(() => import('@/pages/NewArticlePage'));
+const ArticleDetailPage = lazy(() => import('@/pages/ArticleDetailPage'));
+const NotificationPage = lazy(() => import('@/pages/NotificationPage'));
+const ArticlesPage = lazy(() => import('@/pages/ArticlesPage'));
+const ProfileEditPage = lazy(() => import('@/pages/ProfileEditPage'));
+const ChangePasswordPage = lazy(() => import('@/pages/ChangePasswordPage'));
+const ProtectedRouter = lazy(() => import('@/pages/ProtectedRouter'));
+const ArticleEditPage = lazy(() => import('@/pages/ArticleEditPage'));
+
 const router = createBrowserRouter([
   {
     path: '/',

vite.config.ts → vite.config.mts

@@ -1,6 +1,18 @@
 import path from 'path';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import { dependencies } from './package.json';
+
+const renderChunks = (deps: Record<string, string>) => {
+  const chunks = {};
+  Object.keys(deps).forEach((key) => {
+    if (['react', 'react-router-dom', 'react-dom'].includes(key)) {
+      return;
+    }
+    chunks[key] = [key];
+  });
+  return chunks;
+};
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -19,4 +31,15 @@ export default defineConfig({
       { find: '@utils', replacement: path.resolve(__dirname, 'src/utils') },
     ],
   },
+  build: {
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-router-dom', 'react-dom'],
+          ...renderChunks(dependencies),
+        },
+      },
+    },
+  },
 });