번들 사이즈 최적화 (#546)

* chore: webpack bundle analyzer 설치

* chore: compress webpack plugin 설치

* refactor: 이미지 파일 최적화

* refactor: tree shaking 추가

* refactor: tsconfig.json module commonjs에서 esnext로 변경

* refactor: lazy loading을 활용한 코드 스플리팅

* refactor: IntroPage 이미지 png에서 jpg으로 변경

* refactor: 탈퇴 버튼 수정

frontend/package.json

@@ -71,6 +71,7 @@
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
     "babel-plugin-react-require": "^4.0.0",
+    "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "cypress": "^12.17.3",
@@ -93,10 +94,12 @@
     "typescript": "^5.1.6",
     "url-loader": "^4.1.1",
     "webpack": "^5.88.1",
+    "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "msw": {
     "workerDirectory": "public"
-  }
+  },
+  "sideEffects": false
 }

frontend/src/assets/index.d.ts

@@ -6,3 +6,5 @@ declare module '*.svg' {
 }
 
 declare module '*.png';
+
+declare module '*.jpg';

frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.style.ts

@@ -36,6 +36,10 @@ export const deleteButtonStyling = css({
 
     color: Theme.color.gray700,
   },
+
+  '&:focus': {
+    boxShadow: 'none',
+  },
 });
 
 export const modalContentStyling = css({

frontend/src/pages/IntroPage/IntroPage.tsx

@@ -15,8 +15,8 @@ import { mediaQueryMobileState } from '@store/mediaQuery';
 
 import { PATH } from '@constants/path';
 
-import SampleTripImage from '@assets/png/sample-trip-image.png';
-import SampleTripImageMobile from '@assets/png/sample-trip-image_mobile.png';
+import SampleTripImage from '@assets/jpg/sample-trip-image.jpg';
+import SampleTripImageMobile from '@assets/jpg/sample-trip-image_mobile.jpg';
 
 const IntroPage = () => {
   const navigate = useNavigate();

frontend/src/router/AppRouter.tsx

@@ -5,23 +5,16 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import { useRecoilValue } from 'recoil';
 
-import ExpensePage from '@pages/ExpensePage/ExpensePage';
 import ExpensePageSkeleton from '@pages/ExpensePage/ExpensePageSkeleton';
-import IntroPage from '@pages/IntroPage/IntroPage';
-import LogInPage from '@pages/LogInPage/LogInPage';
-import MyPage from '@pages/MyPage/MyPage';
 import NotFoundPage from '@pages/NotFoundPage/NotFoundPage';
 import RedirectPage from '@pages/RedirectPage/RedirectPage';
-import SharedPage from '@pages/SharedPage/SharedPage';
-import TripCreatePage from '@pages/TripCreatePage/TripCreatePage';
-import TripEditPage from '@pages/TripEditPage/TripEditPage';
-import TripPage from '@pages/TripPage/TripPage';
 import TripPageSkeleton from '@pages/TripPage/TripPageSkeleton';
-import TripsPage from '@pages/TripsPage/TripsPage';
 import TripsPageSkeleton from '@pages/TripsPage/TripsPageSkeleton';
 
 import { isLoggedInState } from '@store/auth';
 
+import * as Lazy from '@router/lazy';
+
 import { PATH } from '@constants/path';
 
 const AppRouter = () => {
@@ -37,37 +30,41 @@ const AppRouter = () => {
           path: '',
           element: isLoggedIn ? (
             <Suspense fallback={<TripsPageSkeleton />}>
-              <TripsPage />
+              <Lazy.TripsPage />
             </Suspense>
           ) : (
-            <IntroPage />
+            <Lazy.IntroPage />
           ),
         },
         {
           path: PATH.TRIP(':tripId'),
           element: (
             <Suspense fallback={<TripPageSkeleton />}>
-              <TripPage />
+              <Lazy.TripPage />
             </Suspense>
           ),
         },
         {
           path: PATH.EDIT_TRIP(':tripId'),
           element: (
             <Suspense fallback={<TripPageSkeleton />}>
-              <TripEditPage />
+              <Lazy.TripEditPage />
             </Suspense>
           ),
         },
         {
           path: PATH.CREATE_TRIP,
-          element: <TripCreatePage />,
+          element: (
+            <Suspense>
+              <Lazy.TripCreatePage />
+            </Suspense>
+          ),
         },
         {
           path: PATH.EXPENSE(':tripId'),
           element: (
             <Suspense fallback={<ExpensePageSkeleton />}>
-              <ExpensePage />
+              <Lazy.ExpensePage />
             </Suspense>
           ),
         },
@@ -77,21 +74,25 @@ const AppRouter = () => {
         },
         {
           path: PATH.LOGIN,
-          element: <LogInPage />,
+          element: (
+            <Suspense>
+              <Lazy.LogInPage />
+            </Suspense>
+          ),
         },
         {
           path: PATH.MY_PAGE,
           element: (
             <Suspense fallback={<div>LOADING</div>}>
-              <MyPage />
+              <Lazy.MyPage />
             </Suspense>
           ),
         },
         {
           path: PATH.SHARE(':code'),
           element: (
             <Suspense fallback={<TripPageSkeleton />}>
-              <SharedPage />
+              <Lazy.SharedPage />
             </Suspense>
           ),
         },

frontend/src/router/lazy.ts

@@ -0,0 +1,35 @@
+import { lazy } from 'react';
+
+export const ExpensePage = lazy(
+  () => import(/* webpackChunkName: "ExpensePage" */ '@pages/ExpensePage/ExpensePage')
+);
+
+export const IntroPage = lazy(
+  () => import(/* webpackChunkName: "IntroPage" */ '@pages/IntroPage/IntroPage')
+);
+
+export const LogInPage = lazy(
+  () => import(/* webpackChunkName: "LogInPage" */ '@pages/LogInPage/LogInPage')
+);
+
+export const MyPage = lazy(() => import(/* webpackChunkName: "MyPage" */ '@pages/MyPage/MyPage'));
+
+export const SharedPage = lazy(
+  () => import(/* webpackChunkName: "SharedPage" */ '@pages/SharedPage/SharedPage')
+);
+
+export const TripCreatePage = lazy(
+  () => import(/* webpackChunkName: "TripCreatePage" */ '@pages/TripCreatePage/TripCreatePage')
+);
+
+export const TripEditPage = lazy(
+  () => import(/* webpackChunkName: "TripEditPage" */ '@pages/TripEditPage/TripEditPage')
+);
+
+export const TripPage = lazy(
+  () => import(/* webpackChunkName: "TripPage" */ '@pages/TripPage/TripPage')
+);
+
+export const TripsPage = lazy(
+  () => import(/* webpackChunkName: "TripsPage" */ '@pages/TripsPage/TripsPage')
+);

frontend/tsconfig.json

@@ -3,7 +3,8 @@
     "outDir": "./dist",
     "target": "ES2015",
     "skipLibCheck": true,
-    "module": "commonjs",
+    "module": "esnext",
+    "moduleResolution": "node",
     "strict": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,

frontend/webpack.config.js

@@ -1,7 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 const path = require('path');
 const webpack = require('webpack');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 const prod = process.env.NODE_ENV === 'production';
 
@@ -15,10 +18,13 @@ const plugins = [
   }),
   new webpack.HotModuleReplacementPlugin(),
   new Dotenv(),
+  new BundleAnalyzerPlugin(),
+  new CompressionPlugin(),
 ];
 
 if (!prod) {
   const CopyPlugin = require('copy-webpack-plugin');
+
   plugins.push(
     new CopyPlugin({
       patterns: [{ from: 'public/mockServiceWorker.js', to: '' }],
@@ -51,16 +57,18 @@ module.exports = {
         use: ['url-loader'],
       },
       {
-        test: /\.png$/i,
+        test: /\.(png|jpg)$/i,
         issuer: /\.[jt]sx?$/,
         use: ['url-loader'],
       },
     ],
   },
+
   output: {
     path: path.join(__dirname, '/dist'),
-    filename: 'bundle.js',
+    filename: '[name].[chunkhash].bundle.js',
     publicPath: '/',
+    clean: true,
   },
 
   devServer: {
@@ -90,4 +98,10 @@ module.exports = {
     },
   },
   plugins,
+
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+    },
+  },
 };