enhance: code splitting chunk by page

boostcampwm-2021 · Aug 17, 2022 · 280f31c · 280f31c
1 parent 8888eec
commit 280f31c
Show file tree

Hide file tree

Showing 18 changed files with 79 additions and 103 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -132,5 +132,8 @@
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "overrides": {
+    "react-refresh": "0.11.0"
   }
 }
diff --git a/client/public/index.html b/client/public/index.html
@@ -2,20 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/meetingImage.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>CowDogTing</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js"
-    charset="utf-8"></script>
   </body>
 </html>
diff --git a/client/public/manifest.json b/client/public/manifest.json
diff --git a/client/public/meetingImage.png b/client/public/meetingImage.png
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,21 +1,24 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { Route } from "react-router";
 import { Routes } from "react-router-dom";
-import { MainPage } from "@Page/.";
 import { Footer } from "@Core/.";
 import { useSocketConnect } from "./Hook/useSocket";
 import ErrorModal from "./Component/Template/Modal/ErrorModal";
-import { Page } from "./Component/Page";
+
+const MainPage = React.lazy(() => import("@Page/MainPage/MainPage"));
+const Page = React.lazy(() => import("@Page/Page/Page"));
 
 export const App: React.FC = () => {
   useSocketConnect();
   return (
     <>
-      <Routes>
-        <Route path="/" element={<MainPage />} />
-        <Route path="/main" element={<MainPage />} />
-        <Route path="*" element={<Page />} />
-      </Routes>
+      <Suspense fallback={null}>
+        <Routes>
+          <Route path="/" element={<MainPage />} />
+          <Route path="/main" element={<MainPage />} />
+          <Route path="*" element={<Page />} />
+        </Routes>
+      </Suspense>
       <Footer />
       <ErrorModal />
     </>

diff --git a/client/src/Component/Page/ChatListPage/ChatListPage.tsx b/client/src/Component/Page/ChatListPage/ChatListPage.tsx
@@ -6,7 +6,7 @@ import { ProfileModal } from "@Template/Modal/ProfileModal";
 import { handleModalClick } from "@Common/util";
 import { ChatListTemplateStyle } from "./ChatListPage.style";
 
-export const ChatListPage: React.FC = () => {
+const ChatListPage: React.FC = () => {
   const { offModal, openModal, setOpenModal, chatsInfo, clickedRoomIndex, setClickedRoomIndex } = useToggleModal();
 
   const profileRef = useRef<HTMLDivElement[]>([]);
@@ -22,3 +22,5 @@ export const ChatListPage: React.FC = () => {
     </div>
   );
 };
+
+export default ChatListPage;
diff --git a/client/src/Component/Page/ChatListPage/ChatRoom.tsx b/client/src/Component/Page/ChatListPage/ChatRoom.tsx
@@ -13,7 +13,7 @@ const ChatRoomStyle = css`
   border-right: 1px solid #000000;
 `;
 
-export const ChatRoom: React.FC = () => {
+const ChatRoom: React.FC = () => {
   const setChatInfo = useSetRecoilState(chatTarget);
   const chatDatas = useRecoilValue(chatsState);
   const searchParams = new URLSearchParams(useLocation().search);
@@ -32,3 +32,5 @@ export const ChatRoom: React.FC = () => {
     </div>
   );
 };
+
+export default ChatRoom;
diff --git a/client/src/Component/Page/CowDogPage/CowDogPage.tsx b/client/src/Component/Page/CowDogPage/CowDogPage.tsx
@@ -12,7 +12,7 @@ const ListContainer = css`
   margin: 0 auto;
 `;
 
-export const CowDogPage: React.FC = () => {
+const CowDogPage: React.FC = () => {
   const searchParams = new URLSearchParams(useLocation().search);
   const person = Number(searchParams.get("person"));
 
@@ -34,3 +34,5 @@ export const CowDogPage: React.FC = () => {
     </div>
   );
 };
+
+export default CowDogPage;
diff --git a/client/src/Component/Page/LoginPage/LogInPage.tsx b/client/src/Component/Page/LoginPage/LogInPage.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React from "react";
 import { css } from "@emotion/react";
 import { useLocation } from "react-router-dom";
 import { useRecoilRefresher_UNSTABLE, useSetRecoilState } from "recoil";
@@ -19,7 +19,7 @@ const containerStyle = css`
   margin-top: 50px;
 `;
 
-export const LogInPage: React.FC = () => {
+const LogInPage: React.FC = () => {
   const searchParams = new URLSearchParams(useLocation().search);
   const social = searchParams.get("social") ?? "";
 
@@ -54,3 +54,5 @@ export const LogInPage: React.FC = () => {
     </div>
   );
 };
+
+export default LogInPage;
diff --git a/client/src/Component/Page/MainPage/MainPage.tsx b/client/src/Component/Page/MainPage/MainPage.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { css } from "@emotion/react";
 import { MainHeader, MainPageBody } from "@Organism/.";
 
-export const MainPage: React.FC = () => {
+const MainPage: React.FC = () => {
   return (
     <div css={mainPageTemplateStyle}>
       <div css={mainHeaderStyle}>

diff --git a/client/src/Component/Page/MyPage/MyPage.tsx b/client/src/Component/Page/MyPage/MyPage.tsx
@@ -2,14 +2,16 @@ import React from "react";
 import { css } from "@emotion/react";
 import { MyPageBodyTemplate } from "@Template/MyPageBodyTemplate";
 
-export const MyPage: React.FC = () => {
+const MyPage: React.FC = () => {
   return (
     <div css={MyPageStyle}>
       <MyPageBodyTemplate />
     </div>
   );
 };
 
+export default MyPage;
+
 const MyPageStyle = css`
   width: 100vw;
   height: 100%;

diff --git a/client/src/Component/Page/Page/Page.tsx b/client/src/Component/Page/Page/Page.tsx
@@ -1,13 +1,15 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { Route, Routes } from "react-router";
 import { Header } from "@Core/.";
 import { LoginUserRouter } from "@Hoc/LoginUserRouter";
-import { LogInPage, RegisterPage } from "..";
-import { UserPage } from "./UserPage";
 
-export const Page: React.FC = () => {
+const LogInPage = React.lazy(() => import("../LoginPage/LogInPage"));
+const RegisterPage = React.lazy(() => import("../RegisterPage/RegisterPage"));
+const UserPage = React.lazy(() => import("./UserPage"));
+
+const Page: React.FC = () => {
   return (
-    <>
+    <Suspense fallback={null}>
       <Header />
       <Routes>
         <Route path="/Login" element={<LogInPage />} />
@@ -21,6 +23,8 @@ export const Page: React.FC = () => {
           }
         />
       </Routes>
-    </>
+    </Suspense>
   );
 };
+
+export default Page;
diff --git a/client/src/Component/Page/Page/UserPage.tsx b/client/src/Component/Page/Page/UserPage.tsx
@@ -1,16 +1,27 @@
+import React, { Suspense } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
-import { CowDogPage, TeamSettingPage, MyPage, ChatListPage, RequestPage, ChatRoom } from "..";
 
-export const UserPage = () => {
+const CowDogPage = React.lazy(() => import("../CowDogPage/CowDogPage"));
+const TeamSettingPage = React.lazy(() => import("../TeamSettingPage/TeamSettingPage"));
+const MyPage = React.lazy(() => import("../MyPage/MyPage"));
+const ChatListPage = React.lazy(() => import("../ChatListPage/ChatListPage"));
+const RequestPage = React.lazy(() => import("../RequestPage/RequestPage"));
+const ChatRoom = React.lazy(() => import("../ChatListPage/ChatRoom"));
+
+const UserPage = () => {
   return (
-    <Routes>
-      <Route path="/CowDogPage" element={<CowDogPage />} />
-      <Route path="/teamSetting" element={<TeamSettingPage />} />
-      <Route path="/mypage/*" element={<MyPage />} />
-      <Route path="/chatList" element={<ChatListPage />} />
-      <Route path="/Request" element={<RequestPage />} />
-      <Route path="/ChatRoom" element={<ChatRoom />} />
-      <Route path="*" element={<Navigate to="/" replace />} />
-    </Routes>
+    <Suspense fallback={null}>
+      <Routes>
+        <Route path="/CowDogPage" element={<CowDogPage />} />
+        <Route path="/teamSetting" element={<TeamSettingPage />} />
+        <Route path="/mypage/*" element={<MyPage />} />
+        <Route path="/chatList" element={<ChatListPage />} />
+        <Route path="/Request" element={<RequestPage />} />
+        <Route path="/ChatRoom" element={<ChatRoom />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </Suspense>
   );
 };
+
+export default UserPage;
diff --git a/client/src/Component/Page/RegisterPage/RegisterPage.tsx b/client/src/Component/Page/RegisterPage/RegisterPage.tsx
@@ -8,7 +8,7 @@ import { useMovePage } from "@Hook/useMovePage";
 import { useCheckDoublePassword, useRegisterRefsHook } from "./RegisterPage.hook";
 import * as RegisterStyle from "./RegisterPage.style";
 
-export const RegisterPage: React.FC = () => {
+const RegisterPage: React.FC = () => {
   const [locSelected, setLocSelected] = useState<string>("");
   const [sexSelected, setSexSelected] = useState<string>("");
   const [idValidation, setIdValidation] = useState(false);
@@ -109,6 +109,8 @@ export const RegisterPage: React.FC = () => {
   );
 };
 
+export default RegisterPage;
+
 const checkIdValidationCheck = (idValidation: boolean, setErrorValue: (valOrUpdater: ErrorType | ((currVal: ErrorType) => ErrorType)) => void) => {
   if (!idValidation) setErrorValue({ errorStr: "아이디 중복체크가 필요합니다.", timeOut: 1000 });
   return idValidation;

diff --git a/client/src/Component/Page/RequestPage/RequestPage.tsx b/client/src/Component/Page/RequestPage/RequestPage.tsx
@@ -13,7 +13,8 @@ const RequestPageStyle = css`
   justify-content: center;
 `;
 
-export const RequestPage: React.FC = () => {
+// export const RequestPage: React.FC = () => {
+const RequestPage: React.FC = () => {
   const RequestForMe = useRecoilValue(requestForMeSelector(0));
   const RequestToMe = useRecoilValue(requestToMeSelector(0));
 
@@ -24,3 +25,4 @@ export const RequestPage: React.FC = () => {
     </div>
   );
 };
+export default RequestPage;
diff --git a/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx b/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx
@@ -3,8 +3,9 @@ import { useRecoilValue } from "recoil";
 import { userStateSelector } from "@Recoil/UserData";
 import { TeamCreateTemplate, TeamSettingTemplate } from "@Template/.";
 
-export const TeamSettingPage: React.FC = () => {
+const TeamSettingPage: React.FC = () => {
   const { gid } = useRecoilValue(userStateSelector);
   if (gid && gid !== 0) return <TeamSettingTemplate />;
   return <TeamCreateTemplate />;
 };
+export default TeamSettingPage;
diff --git a/client/src/Component/Page/index.tsx b/client/src/Component/Page/index.tsx