🔨 refactor: 코드 스플리팅 및 성능 향상 작업 (#314)

* 📦 chore: 웹 폰트 preload 적용 * 📦 chore: 이미지 에셋 webp로 변경 * 📦 chore: 라이브러리 별 코드 스플리팅 및 Sentry 트리 셰이킹 적용 * 🔨 refactor: 로딩 UI 전역 처리
dnd-side-project · May 10, 2024 · 19e28a7 · 19e28a7
1 parent 08e28a6
commit 19e28a7
Show file tree

Hide file tree

Showing 44 changed files with 93 additions and 144 deletions.
diff --git a/index.html b/index.html
@@ -2,15 +2,10 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0 user-scalable=no"
     />
-    <link
-      href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/static/woff2/SUIT.css"
-      rel="stylesheet"
-    />
     <link
       rel="preload"
       href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/static/woff2/SUIT.css"
@@ -25,6 +20,8 @@
       type="font/woff"
       crossorigin="anonymous"
     />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
     <!-- Open Graph -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://oceanletter.site/" />
@@ -38,6 +35,7 @@
     <meta property="og:locale" content="ko_KR" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
+
     <!-- Open Graph - twitter -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta property="twitter:domain" content="oceanletter.site" />

diff --git a/src/AdminApp.tsx b/src/AdminApp.tsx
@@ -1,13 +1,15 @@
 import { Outlet } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
+import { Suspense } from 'react';
 import { css } from '@emotion/react';
 import Background from '@/components/Background';
-import BackgroundImg from '@/assets/background.png';
+import BackgroundImg from '@/assets/background.webp';
 import UnknownErrorBoundary from '@/components/ErrorBoundary/UnknownErrorBoundary';
 import ApiErrorBoundary from '@/components/ErrorBoundary/ApiErrorBoundary';
 import TitleHelmet from '@/components/TitleHelmet';
 import RootUnknownFallback from './components/ErrorBoundary/fallback/RootUnknownFallback';
 import RootApiFallback from './components/ErrorBoundary/fallback/RootApiFallback';
+import LoadingScreen from './components/LoadingScreen';
 import 'react-toastify/dist/ReactToastify.css';
 
 const AdminApp = () => {
@@ -17,7 +19,9 @@ const AdminApp = () => {
       <Background imageUrl={BackgroundImg}>
         <UnknownErrorBoundary FallbackComponent={RootUnknownFallback}>
           <ApiErrorBoundary FallbackComponent={RootApiFallback}>
-            <Outlet />
+            <Suspense fallback={<LoadingScreen />}>
+              <Outlet />
+            </Suspense>
           </ApiErrorBoundary>
         </UnknownErrorBoundary>
         <ToastContainer

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,17 @@
 import { Outlet } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
+import { Suspense } from 'react';
 import { css } from '@emotion/react';
 import Background from '@/components/Background';
 import BackgroundMusic from '@/assets/background.mp3';
-import BackgroundImg from '@/assets/background.png';
+import BackgroundImg from '@/assets/background.webp';
 import Audio from '@/components/Audio';
 import UnknownErrorBoundary from '@/components/ErrorBoundary/UnknownErrorBoundary';
 import ApiErrorBoundary from '@/components/ErrorBoundary/ApiErrorBoundary';
 import TitleHelmet from '@/components/TitleHelmet';
 import RootUnknownFallback from './components/ErrorBoundary/fallback/RootUnknownFallback';
 import RootApiFallback from './components/ErrorBoundary/fallback/RootApiFallback';
+import LoadingScreen from './components/LoadingScreen';
 import 'react-toastify/dist/ReactToastify.css';
 
 const App = () => {
@@ -20,7 +22,9 @@ const App = () => {
         <div css={styles.root}>
           <UnknownErrorBoundary FallbackComponent={RootUnknownFallback}>
             <ApiErrorBoundary FallbackComponent={RootApiFallback}>
-              <Outlet />
+              <Suspense fallback={<LoadingScreen />}>
+                <Outlet />
+              </Suspense>
             </ApiErrorBoundary>
           </UnknownErrorBoundary>
           <Audio src={BackgroundMusic} />

diff --git a/src/assets/background.png b/src/assets/background.png
diff --git a/src/assets/background.webp b/src/assets/background.webp
diff --git a/src/assets/images/bottleReception1.png b/src/assets/images/bottleReception1.png
diff --git a/src/assets/images/bottleReception1.webp b/src/assets/images/bottleReception1.webp
diff --git a/src/assets/images/bottleReception2.png b/src/assets/images/bottleReception2.png
diff --git a/src/assets/images/bottleReception2.webp b/src/assets/images/bottleReception2.webp
diff --git a/src/assets/images/bottleReception3.png b/src/assets/images/bottleReception3.png
diff --git a/src/assets/images/bottleReception3.webp b/src/assets/images/bottleReception3.webp
diff --git a/src/assets/images/bottleReception4.png b/src/assets/images/bottleReception4.png
diff --git a/src/assets/images/bottleReception4.webp b/src/assets/images/bottleReception4.webp
diff --git a/src/assets/images/bottleReply1.png b/src/assets/images/bottleReply1.png
diff --git a/src/assets/images/bottleReply1.webp b/src/assets/images/bottleReply1.webp
diff --git a/src/assets/images/bottleReply2.png b/src/assets/images/bottleReply2.png
diff --git a/src/assets/images/bottleReply2.webp b/src/assets/images/bottleReply2.webp
diff --git a/src/assets/images/bottleStorage.png b/src/assets/images/bottleStorage.png
diff --git a/src/assets/images/bottleStorage.webp b/src/assets/images/bottleStorage.webp
diff --git a/src/assets/images/sparkleBig.png b/src/assets/images/sparkleBig.png
diff --git a/src/assets/images/sparkleBig.webp b/src/assets/images/sparkleBig.webp
diff --git a/src/assets/images/sparkleSmall.png b/src/assets/images/sparkleSmall.png
diff --git a/src/assets/images/sparkleSmall.webp b/src/assets/images/sparkleSmall.webp
diff --git a/src/assets/letterBackground.png b/src/assets/letterBackground.png
diff --git a/src/assets/letterBackground.webp b/src/assets/letterBackground.webp
diff --git a/src/assets/storageDrawer.png b/src/assets/storageDrawer.png
diff --git a/src/assets/storageDrawer.webp b/src/assets/storageDrawer.webp
diff --git a/src/components/ErrorBoundary/fallback/RootApiFallback.tsx b/src/components/ErrorBoundary/fallback/RootApiFallback.tsx
@@ -1,7 +1,11 @@
 import { type FallbackProps } from 'react-error-boundary';
 import { useEffect } from 'react';
 import { isAxiosError } from 'axios';
-import * as Sentry from '@sentry/react';
+import {
+  getCurrentScope as SentryGetCurrentScope,
+  setContext as SentrySetContext,
+  captureException as SentryCaptureException,
+} from '@sentry/react';
 import ERROR_RESPONSES from '@/constants/errorMessages';
 import ErrorImage from '@/assets/images/error.svg';
 import Button from '../../Button';
@@ -20,7 +24,7 @@ const RootApiFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
       return;
     }
 
-    const scope = Sentry.getCurrentScope();
+    const scope = SentryGetCurrentScope();
     scope.setTag('type', 'api');
 
     scope.setContext('API Request Detail', {
@@ -31,12 +35,12 @@ const RootApiFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
       headers: error.config?.headers,
     });
 
-    Sentry.setContext('API Response Detail', {
+    SentrySetContext('API Response Detail', {
       status: error.response?.status,
       data: error.response?.data,
     });
 
-    Sentry.captureException(error);
+    SentryCaptureException(error);
   }, []);
 
   if (shouldSkip) {

diff --git a/src/components/ErrorBoundary/fallback/RootUnknownFallback.tsx b/src/components/ErrorBoundary/fallback/RootUnknownFallback.tsx
@@ -2,7 +2,10 @@ import { type FallbackProps } from 'react-error-boundary';
 import { useEffect } from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import { isAxiosError } from 'axios';
-import * as Sentry from '@sentry/react';
+import {
+  getCurrentScope as SentryGetCurrentScope,
+  captureException as SentryCaptureException,
+} from '@sentry/react';
 import ERROR_RESPONSES from '@/constants/errorMessages';
 import ErrorImage from '@/assets/images/error.svg';
 import { ROUTER_PATHS } from '@/constants/routerPaths';
@@ -23,10 +26,10 @@ const RootUnknownFallback = ({ error }: FallbackProps) => {
       return;
     }
 
-    const scope = Sentry.getCurrentScope();
+    const scope = SentryGetCurrentScope();
     scope.setTag('type', 'unknown');
 
-    Sentry.captureException(error);
+    SentryCaptureException(error);
   }, []);
 
   if (shouldSkip) {

diff --git a/src/components/LetterCard/styles.ts b/src/components/LetterCard/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import LetterBackground from '@/assets/letterBackground.png';
+import LetterBackground from '@/assets/letterBackground.webp';
 
 export type Backgroundtype = 'primary' | 'white';
 

diff --git a/src/layouts/AdminLayout.tsx b/src/layouts/AdminLayout.tsx
@@ -1,31 +1,21 @@
-import { Suspense } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { ROUTER_PATHS } from '@/constants/routerPaths';
 import STORAGE_KEYS from '@/constants/storageKeys';
-import LoadingScreen from '@/components/LoadingScreen';
 import memberOptions from '@/api/member/queryOptions';
 
-const SuspensedLayout = () => {
+const AdminLayout = () => {
   const { data } = useSuspenseQuery(memberOptions.detail());
 
-  if (data.role !== 'ADMIN') {
+  if (!localStorage.getItem(STORAGE_KEYS.accessToken)) {
     return <Navigate to={ROUTER_PATHS.SIGNIN} />;
   }
 
-  return <Outlet />;
-};
-
-const AdminLayout = () => {
-  if (!localStorage.getItem(STORAGE_KEYS.accessToken)) {
+  if (data.role !== 'ADMIN') {
     return <Navigate to={ROUTER_PATHS.SIGNIN} />;
   }
 
-  return (
-    <Suspense fallback={<LoadingScreen />}>
-      <SuspensedLayout />
-    </Suspense>
-  );
+  return <Outlet />;
 };
 
 export default AdminLayout;
diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx
@@ -1,27 +1,17 @@
-import { Suspense } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import STORAGE_KEYS from '@/constants/storageKeys';
 import memberOptions from '@/api/member/queryOptions';
 import { ROUTER_PATHS } from '@/constants/routerPaths';
-import LoadingScreen from '@/components/LoadingScreen';
 
-const SuspensedLayout = () => {
+const AuthLayout = () => {
   useSuspenseQuery(memberOptions.detail());
 
-  return <Outlet />;
-};
-
-const AuthLayout = () => {
   if (!localStorage.getItem(STORAGE_KEYS.accessToken)) {
     return <Navigate to={ROUTER_PATHS.SIGNIN} />;
   }
 
-  return (
-    <Suspense fallback={<LoadingScreen />}>
-      <SuspensedLayout />
-    </Suspense>
-  );
+  return <Outlet />;
 };
 
 export default AuthLayout;
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,19 +4,23 @@ import { HelmetProvider } from 'react-helmet-async';
 import ReactDOM from 'react-dom/client';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { QueryClientProvider } from '@tanstack/react-query';
-import * as Sentry from '@sentry/react';
+import {
+  init as SentryInit,
+  browserTracingIntegration as SentryBrowserTracingIntegration,
+  replayIntegration as SentryReplayIntegration,
+} from '@sentry/react';
 import queryClient from '@/api/queryClient';
 import { router } from '@/router';
 import { SKIP_MSW_WARNING_URL } from './constants/msw';
 import STORAGE_KEYS from './constants/storageKeys';
 import 'reset-css';
 import './main.css';
 
-Sentry.init({
+SentryInit({
   dsn: import.meta.env.VITE_SENTRY_DSN,
   integrations: [
-    Sentry.browserTracingIntegration(),
-    Sentry.replayIntegration({
+    SentryBrowserTracingIntegration(),
+    SentryReplayIntegration({
       maskAllText: false,
       blockAllMedia: false,
       networkDetailAllowUrls: [import.meta.env.VITE_BACKEND_ENDPOINT],

diff --git a/src/pages/AdminMainPage/tabs/ReportTab.tsx b/src/pages/AdminMainPage/tabs/ReportTab.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import Paper from '@mui/material/Paper';
 import {
   Table,
@@ -9,7 +9,6 @@ import {
   TableRow,
 } from '@mui/material';
 import Dropdown from '@/components/Dropdown';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import { MoreHorizontal, TrashCan } from '@/assets/icons';
 import COLORS from '@/constants/colors';
 import { REPORT_TYPE_DICT } from '@/constants/report';
@@ -99,9 +98,7 @@ const ReportTab = () => {
         placeholder="검색할 이메일을 입력하세요"
       />
 
-      <Suspense fallback={<LoadingSpinner />}>
-        <SuspensedReportTab email={email} />
-      </Suspense>
+      <SuspensedReportTab email={email} />
     </div>
   );
 };

diff --git a/src/pages/AdminMainPage/tabs/UserTab.tsx b/src/pages/AdminMainPage/tabs/UserTab.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import Paper from '@mui/material/Paper';
 import {
   Table,
@@ -11,7 +11,6 @@ import {
 import Dropdown from '@/components/Dropdown';
 import { Copy, MoreHorizontal, TrashCan } from '@/assets/icons';
 import COLORS from '@/constants/colors';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import useBoolean from '@/hooks/useBoolean';
 import { debounce } from '@/utils/timerUtils';
 import usePagedUserQuery from '../hooks/usePagedUserQuery';
@@ -111,9 +110,7 @@ const UserTab = () => {
         placeholder="검색할 이메일을 입력하세요"
       />
 
-      <Suspense fallback={<LoadingSpinner />}>
-        <SuspensedUserTab searchEmail={email} />
-      </Suspense>
+      <SuspensedUserTab searchEmail={email} />
     </div>
   );
 };

diff --git a/src/pages/LetterReceptionPage/index.tsx b/src/pages/LetterReceptionPage/index.tsx
@@ -1,13 +1,10 @@
 import { useParams } from 'react-router-dom';
-import { Suspense } from 'react';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import UnknownErrorBoundary from '@/components/ErrorBoundary/UnknownErrorBoundary';
 import LetterAccessFallback from '@/components/ErrorBoundary/fallback/LetterAccessFallback';
 import letterOptions from '@/api/letter/queryOptions';
 import OnboardingReception from './OnboardingReception';
 import NormalReception from './NormalReception';
-import style from './styles';
 
 const SuspensedPage = () => {
   const { letterId } = useParams();
@@ -26,16 +23,7 @@ const SuspensedPage = () => {
 const LetterReceptionPage = () => {
   return (
     <UnknownErrorBoundary FallbackComponent={LetterAccessFallback}>
-      <Suspense
-        fallback={
-          <div css={style.loadingSpinner}>
-            <LoadingSpinner size="4rem" />
-            <p>흘러온 편지 가져오는 중...</p>
-          </div>
-        }
-      >
-        <SuspensedPage />
-      </Suspense>
+      <SuspensedPage />
     </UnknownErrorBoundary>
   );
 };

diff --git a/src/pages/LetterReplyPage/index.tsx b/src/pages/LetterReplyPage/index.tsx
@@ -1,6 +1,4 @@
-import { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import UnknownErrorBoundary from '@/components/ErrorBoundary/UnknownErrorBoundary';
 import LetterAccessFallback from '@/components/ErrorBoundary/fallback/LetterAccessFallback';
 import ReplyHeader from './components/ReplyHeader';
@@ -14,25 +12,16 @@ const LetterReplyPage = () => {
 
   return (
     <UnknownErrorBoundary FallbackComponent={LetterAccessFallback}>
-      <Suspense
-        fallback={
-          <div css={style.loadingSpinner}>
-            <LoadingSpinner size="4rem" />
-            <p>답장 받은 편지 가져오는 중...</p>
-          </div>
-        }
-      >
-        <div css={style.container}>
-          <ReplyHeader letterId={Number(letterId)} />
-          <div css={style.content}>
-            <div css={style.letter}>
-              <SentLetter letterId={Number(letterId)} />
-              <ReplyLetter letterId={Number(letterId)} />
-            </div>
-            <BottomButton letterId={Number(letterId)} />
+      <div css={style.container}>
+        <ReplyHeader letterId={Number(letterId)} />
+        <div css={style.content}>
+          <div css={style.letter}>
+            <SentLetter letterId={Number(letterId)} />
+            <ReplyLetter letterId={Number(letterId)} />
           </div>
+          <BottomButton letterId={Number(letterId)} />
         </div>
-      </Suspense>
+      </div>
     </UnknownErrorBoundary>
   );
 };

diff --git a/src/pages/LetterStoragePage/components/StorageLetter.tsx b/src/pages/LetterStoragePage/components/StorageLetter.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { css } from '@emotion/react';
 import { type Reply, type SendLetter } from '@/types/letter';
-import DrowerImage from '@/assets/storageDrawer.png';
-import BottleImage from '@/assets/images/bottleStorage.png';
+import DrowerImage from '@/assets/storageDrawer.webp';
+import BottleImage from '@/assets/images/bottleStorage.webp';
 import useBoolean from '@/hooks/useBoolean';
 import {
   startIndexList,