refactor: 성능 개선 : bundle main.js 용량 줄이기 (#787)

* refactor: 랜딩 페이지 디렉토리 구조 변경 (#767) * refactor: 랜딩 페이지 디렉토리 구조 변경 * refactor: nav 관련 스타일 nav로 이동 * remove: 사용하지 않는 컴포넌트 제거 * style: div => section, article 태그로 변경 * style: 컴포넌트 이름 조금 더 의미있게 변경 * refactor: App을 제외한 페이지 컴포넌트 lazy loading * refactor: QueryClient가 필요하지 않은 랜딩 페이지에서 tanstack-query script 제거 * refactor: tree shaking을 deep하게 적용하기 위해 package.json에 sideEffects false 적용 * feat: prod build 파일에서 sourcemap과 license 파일 제거 * feat: 문의하기 페이지 구현 (#772) * feat: 문의하기 구글 forms 페이지 링크 연결 * fix: chromatic 에러 해결 * refactor 성능 개선 : Preconnect to requered origins (#771) * refactor: 성능개선 Preconnect to requered origins (font) * fix: storybook에서 pretendard 폰트가 적용되도록 스토리북 preview.tsx 수정 * refactor: 성능 개선 : 랜딩 페이지 이미지를 필요한 만큼만 불러오기 (#774) * feat: intersection api를 이용해서 특정 영역이 관측될 때 이미지 src를 채우는 hook 구현 * feat: useImageLazyLoading 훅 적용 * feat: 이미지 alt 값을 한국말로 변경 * fix: feature4,5 이미지를 4 불러올 때 한 번에 불러오는 방식으로 변경 * feat: threshold를 0.1에서 0.05로 조금 더 빨리 불러오도록 변경 * feat: alt 행댕이를 행댕이 - 행동대장 마스코트 라고 자세하게 설명 * feat: threshold default value 0.1 -> 0.05로 변경 * feat: 0.1 -> 0.05 놓친 부분 수정 * refactor: 성능 개선 : Kakao script를 필요한 곳에서 다운로드 받기 (#776) * feat: Kakao script 동적으로 불러올 수 있는 함수 작성 * feat: 드롭다운 버튼 베이스 onClick 메서드 추가 * feat: 모바일 환경에서 초대버튼 눌렀을 때 카카오 스크립트를 불러오도록 설정 * feat: KakaoInitializer 제거 * refactor: v2.1.1에서 구현한 랜딩페이지 개선 (#777) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * fix: `useMainPageYScroll.ts`를 FeatureSection 내부에서 호출하도록 변경 * refactor: avatar style 분ㄹ * fix: avatar를 button이 아니라 a태그로 감싸도록 변경 * style: lint 적용 및 사용하지 않는 주석과 코드 제거 * refactor: Avatar 부분 리스트 렌더링으로 변경 * style: fix 적용 * fix: object tag에 alt property 제거 * fix: 이벤트 홈 페이지에 있을 땐 토큰이 있어도 지출 상세로 접근 불가하도록 수정 (#781) * fix: cypress에서는 sideEffects를 tree shaking하지 않음 * refactor: 성능 개선 : Serve images in next-gen formats (#784) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * chore: webp포맷의 이미지 추가 * chore: webp타입 추가 * feat: 이미지 호스팅 경로를 생성하는 함수 구현 * feat: src, fallbackSrc를 지정해 대체 이미지를 보여줄 수 있는 Image 컴포넌트 구현 * feat: Image컴포넌트를 사용해 이미지를 불러오도록 수정 * feat: Avatar 컴포넌트에서 이미지 경량화를 위한 Image 컴포넌트를 사용 * chore: 사용하지 않고있는 토스 아이콘 제거 * feat: 용량 큰 이미지를 사용하는 곳에선 webp이미지를 사용하도록 수정 * feat: 이미지 경로를 받아오는 함수가 svg포맷도 받아들일 수 있도록 수정 * fix: 이미지 크기가 넘쳐버리지 않도록 width 속성 추가 * feat: 은행 목록 이미지를 webp로 이미지 호스팅 서버에서 가져오도록 수정 * chore: 사용하지 않는 이미지 제거 * feat: 흔듯콘을 webp로 불러오도록 함 * fix: 흔듯콘에 width부여 * design: 행동개시 행댕이의 크기가 너무 커지지 않도록 maxWidth 속성 추가 --------- Co-authored-by: 이태훈 <[email protected]> * feat: QR코드로 초대하기 기능 추가 (#783) * fix: DropDown에 Tap 글씨가 위에 있는 에러 수정 * feat: QR코드로 초대하기 페이지 디자인 구현 및 navigate 추가 * feat: qrcode.react 라이브러리를 활용하여 행사 접속 QR코드 생성 구현 * feat: 데스크탑 초대하기를 DropDown으로 변경하여 QR코드 초대 기능 추가하기 --------- Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: TaehunLee <[email protected]> Co-authored-by: Pakxe <[email protected]> Co-authored-by: 이태훈 <[email protected]>
woowacourse-teams · Oct 24, 2024 · 9e97796 · 9e97796
1 parent 8bde6dd
commit 9e97796
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 72 deletions.
diff --git a/client/package.json b/client/package.json
@@ -3,6 +3,13 @@
   "version": "1.0.0",
   "description": "",
   "type": "module",
+  "sideEffects": [
+    "cypress/**/*",
+    "*.cy.ts",
+    "*.cy.js",
+    "*.spec.ts",
+    "*.spec.js"
+  ],
   "scripts": {
     "prod": "NODE_ENV=production webpack server --open --config webpack.prod.mjs",
     "dev": "NODE_ENV=development webpack server --open --config webpack.dev.mjs",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,10 +1,6 @@
 import {Outlet} from 'react-router-dom';
 import {Global} from '@emotion/react';
-import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 
-import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
-import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
-import ToastContainer from '@components/Toast/ToastContainer';
 import AmplitudeInitializer from '@components/AmplitudeInitializer/AmplitudeInitializer';
 
 import {HDesignProvider} from '@HDesign/index';
@@ -19,16 +15,10 @@ const App: React.FC = () => {
     <HDesignProvider>
       <UnPredictableErrorBoundary>
         <Global styles={GlobalStyle} />
-        <ErrorCatcher>
-          <QueryClientBoundary>
-            <ReactQueryDevtools initialIsOpen={false} />
-            <NetworkStateCatcher />
-            <ToastContainer />
-            <AmplitudeInitializer>
-              <Outlet />
-            </AmplitudeInitializer>
-          </QueryClientBoundary>
-        </ErrorCatcher>
+        <NetworkStateCatcher />
+        <AmplitudeInitializer>
+          <Outlet />
+        </AmplitudeInitializer>
       </UnPredictableErrorBoundary>
     </HDesignProvider>
   );

diff --git a/client/src/EssentialQueryApp.tsx b/client/src/EssentialQueryApp.tsx
@@ -0,0 +1,20 @@
+import {Outlet} from 'react-router-dom';
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
+
+import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
+import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
+import ToastContainer from '@components/Toast/ToastContainer';
+
+const EssentialQueryApp: React.FC = () => {
+  return (
+    <ErrorCatcher>
+      <QueryClientBoundary>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <ToastContainer />
+        <Outlet />
+      </QueryClientBoundary>
+    </ErrorCatcher>
+  );
+};
+
+export default EssentialQueryApp;
diff --git a/client/src/router.tsx b/client/src/router.tsx
@@ -1,19 +1,17 @@
 import {createBrowserRouter} from 'react-router-dom';
 import {lazy, Suspense} from 'react';
 
-import ErrorPage from '@pages/ErrorPage/ErrorPage';
-import EventLoginPage from '@pages/EventPage/AdminPage/EventLoginPage';
-import EventLoader from '@components/Loader/EventLoader';
-import SendErrorPage from '@pages/ErrorPage/SendErrorPage';
-import AuthGate from '@pages/EventPage/AuthGate';
-
-import {EventPage} from '@pages/EventPage';
-import SendPage from '@pages/SendPage';
-
 import {ROUTER_URLS} from '@constants/routerUrls';
 
 import App from './App';
 
+const ErrorPage = lazy(() => import('@pages/ErrorPage/ErrorPage'));
+const SendErrorPage = lazy(() => import('@pages/ErrorPage/SendErrorPage'));
+const EventLoginPage = lazy(() => import('@pages/EventPage/AdminPage/EventLoginPage'));
+const EventLoader = lazy(() => import('@components/Loader/EventLoader'));
+const AuthGate = lazy(() => import('@pages/EventPage/AuthGate'));
+const EventPage = lazy(() => import('@pages/EventPage/EventPageLayout'));
+const SendPage = lazy(() => import('@pages/SendPage'));
 const MainPage = lazy(() => import('@pages/MainPage/MainPage'));
 const HomePage = lazy(() => import('@pages/EventPage/HomePage/HomePage'));
 const CreateEventFunnel = lazy(() => import('@pages/CreateEventPage/CreateEventFunnel'));
@@ -24,6 +22,7 @@ const EditBillPage = lazy(() => import('@pages/EditBillPage/EditBillPage'));
 const Account = lazy(() => import('@pages/AccountPage/Account'));
 const ImagesPage = lazy(() => import('@pages/ImagesPage/ImagesPage'));
 const AddImagesPage = lazy(() => import('@pages/AddImagesPage/AddImagesPage'));
+const EssentialQueryApp = lazy(() => import('./EssentialQueryApp'));
 const QRCodePage = lazy(() => import('@pages/QRCodePage/QRCodePage'));
 
 const router = createBrowserRouter([
@@ -41,62 +40,69 @@ const router = createBrowserRouter([
         element: <MainPage />,
       },
       {
-        path: ROUTER_URLS.createEvent,
-
-        element: <CreateEventFunnel />,
-      },
-      {
-        path: ROUTER_URLS.event,
-        element: (
-          <EventLoader>
-            <EventPage />
-          </EventLoader>
-        ),
+        element: <EssentialQueryApp />,
         children: [
           {
-            path: ROUTER_URLS.eventManage,
+            path: ROUTER_URLS.createEvent,
+            element: <CreateEventFunnel />,
+          },
+          {
+            path: ROUTER_URLS.event,
             element: (
-              <AuthGate fallback={<EventLoginPage />}>
-                <AdminPage />
-              </AuthGate>
+              <EventLoader>
+                <EventPage />
+              </EventLoader>
             ),
+            children: [
+              {
+                path: ROUTER_URLS.eventManage,
+                element: (
+                  <AuthGate fallback={<EventLoginPage />}>
+                    <AdminPage />
+                  </AuthGate>
+                ),
+              },
+              {
+                path: ROUTER_URLS.home,
+                element: <HomePage />,
+              },
+            ],
+          },
+          {
+            path: ROUTER_URLS.addBill,
+            element: <AddBillFunnel />,
+          },
+          {
+            path: ROUTER_URLS.member,
+            element: <EventMember />,
+          },
+          {
+            path: ROUTER_URLS.editBill,
+            element: <EditBillPage />,
+          },
+          {
+            path: ROUTER_URLS.eventEdit,
+            element: <Account />,
+          },
+          {
+            path: ROUTER_URLS.images,
+            element: <ImagesPage />,
+          },
+          {
+            path: ROUTER_URLS.addImages,
+            element: <AddImagesPage />,
+          },
+          {
+            path: ROUTER_URLS.send,
+            element: <SendPage />,
+            errorElement: <SendErrorPage />,
+          },
+          {
+            path: ROUTER_URLS.qrCode,
+            element: <QRCodePage />,
           },
-          {path: ROUTER_URLS.home, element: <HomePage />},
         ],
       },
-      {
-        path: ROUTER_URLS.addBill,
-        element: <AddBillFunnel />,
-      },
-      {
-        path: ROUTER_URLS.member,
-        element: <EventMember />,
-      },
-      {
-        path: ROUTER_URLS.editBill,
-        element: <EditBillPage />,
-      },
-      {
-        path: ROUTER_URLS.eventEdit,
-        element: <Account />,
-      },
-      {
-        path: ROUTER_URLS.images,
-        element: <ImagesPage />,
-      },
-      {
-        path: ROUTER_URLS.addImages,
-        element: <AddImagesPage />,
-      },
-      {
-        path: ROUTER_URLS.send,
-        element: <SendPage />,
-        errorElement: <SendErrorPage />,
-      },
-      {
-        path: ROUTER_URLS.qrCode,
-        element: <QRCodePage />,
-      },
       {
         path: '*',
         element: <ErrorPage />,

diff --git a/client/webpack.prod.mjs b/client/webpack.prod.mjs
@@ -26,6 +26,9 @@ export default merge(common, {
       authToken: process.env.SENTRY_AUTH_TOKEN,
       org: 'wtc-o6',
       project: 'javascript-react',
+      sourcemaps: {
+        filesToDeleteAfterUpload: ['**/*.js.map', '**/*.css.map', '**/*.LICENSE.txt'],
+      },
     }),
   ],
 });