로그인, 투표 통계, 회원정보 페이지 lazy import 적용 (#571)

* feat: (#556) lazy import 설정 및 트리쉐이킹 설정

* feat: (#556) 로그인, 투표 통계, 회원정보 입력 페이지 lazy import 적용

* feat: (#556) 번들 이름 매번 바뀌도록 변경 및 수정되었던 코드 복구

* feat: (#556) Suspense 코드 복구

---------

Co-authored-by: jero_kang <81199414+inyeong-kang@users.noreply.github.com>

frontend/public/seo/sitemap.xml

@@ -6,16 +6,16 @@
 >
  <url>
  <loc>https://votogether.com/</loc>
- <lastmod>2023-09-13T04:22:25.347Z</lastmod>
+ <lastmod>2023-09-14T06:06:57.224Z</lastmod>
  </url>
 
  <url>
  <loc>https://votogether.com/login</loc>
- <lastmod>2023-09-13T04:22:25.347Z</lastmod>
+ <lastmod>2023-09-14T06:06:57.224Z</lastmod>
  </url>
 
  <url>
  <loc>https://votogether.com/ranking</loc>
- <lastmod>2023-09-13T04:22:25.347Z</lastmod>
+ <lastmod>2023-09-14T06:06:57.224Z</lastmod>
  </url>
 </urlset>

frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -11,6 +12,7 @@ import router from '@routes/router';
 import ErrorBoundaryForTopClass from '@pages/ErrorBoundaryForTopClass';
 
 import ChannelTalk from '@components/ChannelTalk';
+import Skeleton from '@components/common/Skeleton';
 
 import { GlobalStyle } from '@styles/globalStyle';
 import { theme } from '@styles/theme';
@@ -29,7 +31,9 @@ const App = () => (
  <GlobalStyle />
  <PostOptionProvider>
  <AuthProvider>
- <RouterProvider router={router} />
+ <Suspense fallback={<Skeleton isLarge />}>
+ <RouterProvider router={router} />
+ </Suspense>
  </AuthProvider>
  </PostOptionProvider>
  </ThemeProvider>

frontend/src/routes/router.tsx

@@ -1,7 +1,7 @@
+import { lazy } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 
 import Announcement from '@pages/Announcement';
-import Login from '@pages/auth/Login';
 import Redirection from '@pages/auth/Redirection';
 import Error from '@pages/Error';
 import Home from '@pages/Home';
@@ -11,8 +11,6 @@ import CreatePostPage from '@pages/post/CreatePostPage';
 import EditPostPage from '@pages/post/EditPostPage';
 import PostDetailPage from '@pages/post/PostDetail';
 import Ranking from '@pages/Ranking';
-import RegisterPersonalInfo from '@pages/user/RegisterPersonalInfo';
-import VoteStatisticsPage from '@pages/VoteStatisticsPage';
 
 import ScrollToTop from '@components/common/ScrollToTop';
 import RouteChangeTracker from '@components/RouteChangeTracker';
@@ -21,6 +19,10 @@ import { PATH } from '@constants/path';
 
 import PrivateRoute from './PrivateRoute';
 
+const Login = lazy(() => import('@pages/auth/Login'));
+const RegisterPersonalInfo = lazy(() => import('@pages/user/RegisterPersonalInfo'));
+const VoteStatisticsPage = lazy(() => import('@pages/VoteStatisticsPage'));
+
 const router = createBrowserRouter([
  {
  path: PATH.HOME,

frontend/webpack.common.js

@@ -11,7 +11,7 @@ module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
- filename: 'bundle.js',
+ filename: '[contenthash].bundle.js',
  path: path.resolve(__dirname, 'dist'),
  clean: true,
  publicPath: '/',