From ce7531199070bb1c39508672afeec68d71b51cbf Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 20 Sep 2023 13:46:02 +0900 Subject: [PATCH 1/8] =?UTF-8?q?chore:=20bundle=20analyzer=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/webpack.common.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index 9c705c237..8543b4a78 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -1,11 +1,12 @@ const path = require('path'); const Dotenv = require('dotenv-webpack'); +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { entry: './src/index.tsx', output: { path: path.join(__dirname, 'dist'), - filename: 'bundle.js', + filename: '[chunkhash]bundle.js', clean: true, publicPath: '/', }, @@ -37,5 +38,5 @@ module.exports = { }, ], }, - plugins: [new Dotenv()], + plugins: [new Dotenv(), new BundleAnalyzerPlugin()], }; From 37f9251f79a961ffa0f33ba8e0e98395a2ac32ff Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 20 Sep 2023 13:46:23 +0900 Subject: [PATCH 2/8] =?UTF-8?q?chore:=20split=20chunk=20all=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/webpack.prod.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/webpack.prod.js b/frontend/webpack.prod.js index 63d76544c..3d7d802ab 100644 --- a/frontend/webpack.prod.js +++ b/frontend/webpack.prod.js @@ -22,4 +22,9 @@ module.exports = merge(common, { ], }), ], + optimization: { + splitChunks: { + chunks: 'all', + }, + }, }); From 1be73a7886da2f2cf721ba81178bda3ddb2a559a Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 20 Sep 2023 13:47:02 +0900 Subject: [PATCH 3/8] =?UTF-8?q?chore:=20export=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/AuthPage.tsx | 4 +--- frontend/src/pages/IntegratedSearchPage.tsx | 4 +--- frontend/src/pages/LoginPage.tsx | 4 +--- frontend/src/pages/MemberModifyPage.tsx | 4 +--- frontend/src/pages/MemberPage.tsx | 4 +--- frontend/src/pages/MemberRecipePage.tsx | 4 +--- frontend/src/pages/MemberReviewPage.tsx | 4 +--- frontend/src/pages/ProductDetailPage.tsx | 4 +--- frontend/src/pages/ProductListPage.tsx | 4 +--- frontend/src/pages/RecipeDetailPage.tsx | 4 +--- frontend/src/pages/RecipePage.tsx | 4 +--- frontend/src/pages/SearchPage.tsx | 4 +--- 12 files changed, 12 insertions(+), 36 deletions(-) diff --git a/frontend/src/pages/AuthPage.tsx b/frontend/src/pages/AuthPage.tsx index d5fd87b8e..a840cb978 100644 --- a/frontend/src/pages/AuthPage.tsx +++ b/frontend/src/pages/AuthPage.tsx @@ -5,7 +5,7 @@ import { loginApi } from '@/apis'; import { PATH } from '@/constants/path'; import { useMemberQuery } from '@/hooks/queries/members'; -const AuthPage = () => { +export const AuthPage = () => { const { authProvider } = useParams(); const [searchParams] = useSearchParams(); const code = searchParams.get('code'); @@ -57,5 +57,3 @@ const AuthPage = () => { return <>; }; - -export default AuthPage; diff --git a/frontend/src/pages/IntegratedSearchPage.tsx b/frontend/src/pages/IntegratedSearchPage.tsx index 285fc5c2e..90b268d96 100644 --- a/frontend/src/pages/IntegratedSearchPage.tsx +++ b/frontend/src/pages/IntegratedSearchPage.tsx @@ -12,7 +12,7 @@ import { useSearch } from '@/hooks/search'; const PRODUCT_PLACEHOLDER = '상품 이름을 검색해보세요.'; const RECIPE_PLACEHOLDER = '꿀조합에 포함된 상품을 입력해보세요.'; -const IntegratedSearchPage = () => { +export const IntegratedSearchPage = () => { const { inputRef, searchQuery, @@ -103,8 +103,6 @@ const IntegratedSearchPage = () => { ); }; -export default IntegratedSearchPage; - const SearchSection = styled.section` position: relative; `; diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx index 6cefd12d4..a64bcbb24 100644 --- a/frontend/src/pages/LoginPage.tsx +++ b/frontend/src/pages/LoginPage.tsx @@ -13,7 +13,7 @@ const KAKAO_LOGIN = '카카오 로그인'; const loginLink = process.env.NODE_ENV === 'development' ? '/login/kakao?code=qwe' : '/api/auth/kakao'; -const LoginPage = () => { +export const LoginPage = () => { const { routeBack } = useRoutePage(); const { data: member } = useMemberQuery(); @@ -47,8 +47,6 @@ const LoginPage = () => { ); }; -export default LoginPage; - const LoginPageContainer = styled.div` display: flex; flex-direction: column; diff --git a/frontend/src/pages/MemberModifyPage.tsx b/frontend/src/pages/MemberModifyPage.tsx index 50e98f690..c6c43a8c3 100644 --- a/frontend/src/pages/MemberModifyPage.tsx +++ b/frontend/src/pages/MemberModifyPage.tsx @@ -11,7 +11,7 @@ import { useFormData, useImageUploader } from '@/hooks/common'; import { useMemberModifyMutation, useMemberQuery } from '@/hooks/queries/members'; import type { MemberRequest } from '@/types/member'; -const MemberModifyPage = () => { +export const MemberModifyPage = () => { const { data: member } = useMemberQuery(); const { mutate } = useMemberModifyMutation(); @@ -96,8 +96,6 @@ const MemberModifyPage = () => { ); }; -export default MemberModifyPage; - const MemberImageUploaderContainer = styled.div` display: flex; justify-content: center; diff --git a/frontend/src/pages/MemberPage.tsx b/frontend/src/pages/MemberPage.tsx index bb5fca6bb..7026e4768 100644 --- a/frontend/src/pages/MemberPage.tsx +++ b/frontend/src/pages/MemberPage.tsx @@ -7,7 +7,7 @@ import { ErrorBoundary, ErrorComponent, Loading, NavigableSectionTitle } from '@ import { MembersInfo, MemberReviewList, MemberRecipeList } from '@/components/Members'; import { PATH } from '@/constants/path'; -const MemberPage = () => { +export const MemberPage = () => { const { reset } = useQueryErrorResetBoundary(); return ( @@ -35,8 +35,6 @@ const MemberPage = () => { ); }; -export default MemberPage; - const MemberPageContainer = styled.div` padding: 20px 20px 0; `; diff --git a/frontend/src/pages/MemberRecipePage.tsx b/frontend/src/pages/MemberRecipePage.tsx index 90bddc44b..5bbedf533 100644 --- a/frontend/src/pages/MemberRecipePage.tsx +++ b/frontend/src/pages/MemberRecipePage.tsx @@ -6,7 +6,7 @@ import styled from 'styled-components'; import { ErrorBoundary, ErrorComponent, Loading, ScrollButton, SectionTitle } from '@/components/Common'; import { MemberRecipeList } from '@/components/Members'; -const MemberRecipePage = () => { +export const MemberRecipePage = () => { const { reset } = useQueryErrorResetBoundary(); const memberRecipeRef = useRef(null); @@ -25,8 +25,6 @@ const MemberRecipePage = () => { ); }; -export default MemberRecipePage; - const MemberRecipePageContainer = styled.div` height: 100%; padding: 20px 20px 0; diff --git a/frontend/src/pages/MemberReviewPage.tsx b/frontend/src/pages/MemberReviewPage.tsx index 9f15905fd..08dd6390d 100644 --- a/frontend/src/pages/MemberReviewPage.tsx +++ b/frontend/src/pages/MemberReviewPage.tsx @@ -6,7 +6,7 @@ import styled from 'styled-components'; import { ErrorBoundary, ErrorComponent, Loading, ScrollButton, SectionTitle } from '@/components/Common'; import { MemberReviewList } from '@/components/Members'; -const MemberReviewPage = () => { +export const MemberReviewPage = () => { const { reset } = useQueryErrorResetBoundary(); const memberReviewRef = useRef(null); @@ -25,8 +25,6 @@ const MemberReviewPage = () => { ); }; -export default MemberReviewPage; - const MemberReviewPageContainer = styled.div` height: 100%; padding: 20px 20px 0; diff --git a/frontend/src/pages/ProductDetailPage.tsx b/frontend/src/pages/ProductDetailPage.tsx index 11f668dd2..e216ea9a3 100644 --- a/frontend/src/pages/ProductDetailPage.tsx +++ b/frontend/src/pages/ProductDetailPage.tsx @@ -30,7 +30,7 @@ const LOGIN_ERROR_MESSAGE_REVIEW = const LOGIN_ERROR_MESSAGE_RECIPE = '로그인 후 상품 꿀조합을 볼 수 있어요.\n펀잇에 가입하고 편의점 상품 꿀조합을 확인해보세요 😊'; -const ProductDetailPage = () => { +export const ProductDetailPage = () => { const { category, productId } = useParams(); const { data: member } = useMemberQuery(); const { data: productDetail } = useProductDetailQuery(Number(productId)); @@ -147,8 +147,6 @@ const ProductDetailPage = () => { ); }; -export default ProductDetailPage; - const ProductDetailPageContainer = styled.div` height: 100%; overflow-y: auto; diff --git a/frontend/src/pages/ProductListPage.tsx b/frontend/src/pages/ProductListPage.tsx index b4961e746..78d45d9ed 100644 --- a/frontend/src/pages/ProductListPage.tsx +++ b/frontend/src/pages/ProductListPage.tsx @@ -23,7 +23,7 @@ import { isCategoryVariant } from '@/types/common'; const PAGE_TITLE = { food: '공통 상품', store: 'PB 상품' }; -const ProductListPage = () => { +export const ProductListPage = () => { const { category } = useParams(); const productListRef = useRef(null); @@ -75,8 +75,6 @@ const ProductListPage = () => { ); }; -export default ProductListPage; - const ProductListSection = styled.section` height: 100%; `; diff --git a/frontend/src/pages/RecipeDetailPage.tsx b/frontend/src/pages/RecipeDetailPage.tsx index cc77efb77..61b1ab585 100644 --- a/frontend/src/pages/RecipeDetailPage.tsx +++ b/frontend/src/pages/RecipeDetailPage.tsx @@ -8,7 +8,7 @@ import { RecipeFavorite } from '@/components/Recipe'; import { useRecipeDetailQuery } from '@/hooks/queries/recipe'; import { getFormattedDate } from '@/utils/date'; -const RecipeDetailPage = () => { +export const RecipeDetailPage = () => { const { recipeId } = useParams(); const { data: recipeDetail } = useRecipeDetailQuery(Number(recipeId)); @@ -70,8 +70,6 @@ const RecipeDetailPage = () => { ); }; -export default RecipeDetailPage; - const RecipeDetailPageContainer = styled.div` padding: 20px 20px 0; `; diff --git a/frontend/src/pages/RecipePage.tsx b/frontend/src/pages/RecipePage.tsx index 579639542..be4d66cbc 100644 --- a/frontend/src/pages/RecipePage.tsx +++ b/frontend/src/pages/RecipePage.tsx @@ -24,7 +24,7 @@ const RECIPE_PAGE_TITLE = '🍯 꿀조합'; const REGISTER_RECIPE = '꿀조합 작성하기'; const REGISTER_RECIPE_AFTER_LOGIN = '로그인 후 꿀조합을 작성할 수 있어요'; -const RecipePage = () => { +export const RecipePage = () => { const [activeSheet, setActiveSheet] = useState<'registerRecipe' | 'sortOption'>('sortOption'); const { selectedOption, selectSortOption } = useSortOption(RECIPE_SORT_OPTIONS[0]); const { ref, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet(); @@ -87,8 +87,6 @@ const RecipePage = () => { ); }; -export default RecipePage; - const TitleWrapper = styled.div` display: flex; justify-content: space-between; diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx index f63232dba..1204220f1 100644 --- a/frontend/src/pages/SearchPage.tsx +++ b/frontend/src/pages/SearchPage.tsx @@ -15,7 +15,7 @@ const RECIPE_PLACEHOLDER = '꿀조합에 포함된 상품을 입력해보세요. type SearchPageType = keyof typeof SEARCH_PAGE_VARIANTS; -const SearchPage = () => { +export const SearchPage = () => { const { inputRef, searchQuery, @@ -118,8 +118,6 @@ const SearchPage = () => { ); }; -export default SearchPage; - const SearchSection = styled.section` position: relative; `; From 4dae6a38608256f13c3e7bf9469b47185185cbec Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 20 Sep 2023 13:47:50 +0900 Subject: [PATCH 4/8] =?UTF-8?q?chore:=20router=20provider=20fallback=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 9be413e9f..113f22f69 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -42,7 +42,7 @@ root.render( - + ...loading

} /> From 9c8eee2284ed9fdc3a8004c8ed783ade1fc916ba Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 20 Sep 2023 14:06:19 +0900 Subject: [PATCH 5/8] =?UTF-8?q?chore:=20=EB=B2=88=EB=93=A4=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/tsconfig.json | 3 ++- frontend/webpack.common.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index e3dff3aa1..321f1c029 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -15,7 +15,8 @@ "baseUrl": ".", "paths": { "@/*": ["src/*"] - } + }, + "removeComments": false }, "include": ["src", "__tests__"], "exclude": ["node_modules", "dist"] diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index 8543b4a78..c98c2b1b9 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -6,7 +6,7 @@ module.exports = { entry: './src/index.tsx', output: { path: path.join(__dirname, 'dist'), - filename: '[chunkhash]bundle.js', + filename: '[name].[chunkhash].js', clean: true, publicPath: '/', }, From 658b2d90784b42894d43fa6184b7c6cd1e739fcf Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 20 Sep 2023 14:07:10 +0900 Subject: [PATCH 6/8] =?UTF-8?q?refactor:=20lazy=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/router/index.tsx | 119 +++++++++++++++++++--------------- 1 file changed, 68 insertions(+), 51 deletions(-) diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx index 7bf9565ea..9c1010f8f 100644 --- a/frontend/src/router/index.tsx +++ b/frontend/src/router/index.tsx @@ -5,74 +5,70 @@ import App from './App'; import { AuthLayout } from '@/components/Layout'; import { PATH } from '@/constants/path'; import CategoryProvider from '@/contexts/CategoryContext'; -import AuthPage from '@/pages/AuthPage'; -import HomePage from '@/pages/HomePage'; -import IntegratedSearchPage from '@/pages/IntegratedSearchPage'; -import LoginPage from '@/pages/LoginPage'; -import MemberModifyPage from '@/pages/MemberModifyPage'; -import MemberPage from '@/pages/MemberPage'; -import MemberRecipePage from '@/pages/MemberRecipePage'; -import MemberReviewPage from '@/pages/MemberReviewPage'; import NotFoundPage from '@/pages/NotFoundPage'; -import ProductDetailPage from '@/pages/ProductDetailPage'; -import ProductListPage from '@/pages/ProductListPage'; -import RecipeDetailPage from '@/pages/RecipeDetailPage'; -import RecipePage from '@/pages/RecipePage'; -import SearchPage from '@/pages/SearchPage'; const router = createBrowserRouter([ { path: '/', element: ( - + - + ), errorElement: , children: [ - { - index: true, - element: , - }, { path: `${PATH.RECIPE}/:recipeId`, - element: ( - - - - ), + async lazy() { + const { RecipeDetailPage } = await import('@/pages/RecipeDetailPage'); + return { Component: RecipeDetailPage }; + }, }, { path: PATH.MEMBER, - element: ( - - - - ), + async lazy() { + const { MemberPage } = await import('@/pages/MemberPage'); + return { Component: MemberPage }; + }, }, { path: `${PATH.MEMBER}/modify`, - element: ( - - - - ), + async lazy() { + const { MemberModifyPage } = await import('@/pages/MemberModifyPage'); + return { Component: MemberModifyPage }; + }, }, { path: `${PATH.MEMBER}/review`, - element: ( - - - - ), + async lazy() { + const { MemberReviewPage } = await import('@/pages/MemberReviewPage'); + return { Component: MemberReviewPage }; + }, }, { path: `${PATH.MEMBER}/recipe`, - element: ( - - - - ), + async lazy() { + const { MemberRecipePage } = await import('@/pages/MemberRecipePage'); + return { Component: MemberRecipePage }; + }, + }, + ], + }, + { + path: '/', + element: ( + + + + ), + errorElement: , + children: [ + { + index: true, + async lazy() { + const { HomePage } = await import(/* webpackChunkName: "home" */ '@/pages/HomePage'); + return { Component: HomePage }; + }, }, ], }, @@ -83,11 +79,17 @@ const router = createBrowserRouter([ children: [ { path: PATH.LOGIN, - element: , + async lazy() { + const { LoginPage } = await import('@/pages/LoginPage'); + return { Component: LoginPage }; + }, }, { path: `${PATH.LOGIN}/:authProvider`, - element: , + async lazy() { + const { AuthPage } = await import('@/pages/AuthPage'); + return { Component: AuthPage }; + }, }, ], }, @@ -102,7 +104,10 @@ const router = createBrowserRouter([ children: [ { path: `${PATH.PRODUCT_LIST}/:category/:productId`, - element: , + async lazy() { + const { ProductDetailPage } = await import('@/pages/ProductDetailPage'); + return { Component: ProductDetailPage }; + }, }, ], }, @@ -117,19 +122,31 @@ const router = createBrowserRouter([ children: [ { path: `${PATH.PRODUCT_LIST}/:category`, - element: , + async lazy() { + const { ProductListPage } = await import('@/pages/ProductListPage'); + return { Component: ProductListPage }; + }, }, { path: PATH.RECIPE, - element: , + async lazy() { + const { RecipePage } = await import('@/pages/RecipePage'); + return { Component: RecipePage }; + }, }, { path: `${PATH.SEARCH}/integrated`, - element: , + async lazy() { + const { IntegratedSearchPage } = await import('@/pages/IntegratedSearchPage'); + return { Component: IntegratedSearchPage }; + }, }, { path: `${PATH.SEARCH}/:searchVariant`, - element: , + async lazy() { + const { SearchPage } = await import('@/pages/SearchPage'); + return { Component: SearchPage }; + }, }, ], }, From 10a3645ab2965375c635afa23f4e07dfb927558b Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 20 Sep 2023 14:07:24 +0900 Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20export=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/HomePage.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index e6e701b07..17f55be94 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -8,7 +8,7 @@ import { ProductRankingList, ReviewRankingList, RecipeRankingList } from '@/comp import { IMAGE_URL } from '@/constants'; import channelTalk from '@/service/channelTalk'; -const HomePage = () => { +export const HomePage = () => { const { reset } = useQueryErrorResetBoundary(); channelTalk.loadScript(); @@ -77,8 +77,6 @@ const HomePage = () => { ); }; -export default HomePage; - const Banner = styled.img` width: 100%; `; From f95613915252b6bfcedbb2a76d3575dc745fbbe2 Mon Sep 17 00:00:00 2001 From: hae-on Date: Wed, 20 Sep 2023 14:10:49 +0900 Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=EB=B2=88=EB=93=A4=20name=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/router/index.tsx | 38 +++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx index 9c1010f8f..0103d0fc7 100644 --- a/frontend/src/router/index.tsx +++ b/frontend/src/router/index.tsx @@ -20,35 +20,43 @@ const router = createBrowserRouter([ { path: `${PATH.RECIPE}/:recipeId`, async lazy() { - const { RecipeDetailPage } = await import('@/pages/RecipeDetailPage'); + const { RecipeDetailPage } = await import( + /* webpackChunkName: "RecipeDetailPage" */ '@/pages/RecipeDetailPage' + ); return { Component: RecipeDetailPage }; }, }, { path: PATH.MEMBER, async lazy() { - const { MemberPage } = await import('@/pages/MemberPage'); + const { MemberPage } = await import(/* webpackChunkName: "MemberPage" */ '@/pages/MemberPage'); return { Component: MemberPage }; }, }, { path: `${PATH.MEMBER}/modify`, async lazy() { - const { MemberModifyPage } = await import('@/pages/MemberModifyPage'); + const { MemberModifyPage } = await import( + /* webpackChunkName: "MemberModifyPage" */ '@/pages/MemberModifyPage' + ); return { Component: MemberModifyPage }; }, }, { path: `${PATH.MEMBER}/review`, async lazy() { - const { MemberReviewPage } = await import('@/pages/MemberReviewPage'); + const { MemberReviewPage } = await import( + /* webpackChunkName: "MemberReviewPage" */ '@/pages/MemberReviewPage' + ); return { Component: MemberReviewPage }; }, }, { path: `${PATH.MEMBER}/recipe`, async lazy() { - const { MemberRecipePage } = await import('@/pages/MemberRecipePage'); + const { MemberRecipePage } = await import( + /* webpackChunkName: "MemberRecipePage" */ '@/pages/MemberRecipePage' + ); return { Component: MemberRecipePage }; }, }, @@ -66,7 +74,7 @@ const router = createBrowserRouter([ { index: true, async lazy() { - const { HomePage } = await import(/* webpackChunkName: "home" */ '@/pages/HomePage'); + const { HomePage } = await import(/* webpackChunkName: "HomePage" */ '@/pages/HomePage'); return { Component: HomePage }; }, }, @@ -80,14 +88,14 @@ const router = createBrowserRouter([ { path: PATH.LOGIN, async lazy() { - const { LoginPage } = await import('@/pages/LoginPage'); + const { LoginPage } = await import(/* webpackChunkName: "LoginPage" */ '@/pages/LoginPage'); return { Component: LoginPage }; }, }, { path: `${PATH.LOGIN}/:authProvider`, async lazy() { - const { AuthPage } = await import('@/pages/AuthPage'); + const { AuthPage } = await import(/* webpackChunkName: "AuthPage" */ '@/pages/AuthPage'); return { Component: AuthPage }; }, }, @@ -105,7 +113,9 @@ const router = createBrowserRouter([ { path: `${PATH.PRODUCT_LIST}/:category/:productId`, async lazy() { - const { ProductDetailPage } = await import('@/pages/ProductDetailPage'); + const { ProductDetailPage } = await import( + /* webpackChunkName: "ProductDetailPage" */ '@/pages/ProductDetailPage' + ); return { Component: ProductDetailPage }; }, }, @@ -123,28 +133,30 @@ const router = createBrowserRouter([ { path: `${PATH.PRODUCT_LIST}/:category`, async lazy() { - const { ProductListPage } = await import('@/pages/ProductListPage'); + const { ProductListPage } = await import(/* webpackChunkName: "ProductListPage" */ '@/pages/ProductListPage'); return { Component: ProductListPage }; }, }, { path: PATH.RECIPE, async lazy() { - const { RecipePage } = await import('@/pages/RecipePage'); + const { RecipePage } = await import(/* webpackChunkName: "RecipePage" */ '@/pages/RecipePage'); return { Component: RecipePage }; }, }, { path: `${PATH.SEARCH}/integrated`, async lazy() { - const { IntegratedSearchPage } = await import('@/pages/IntegratedSearchPage'); + const { IntegratedSearchPage } = await import( + /* webpackChunkName: "IntegratedSearchPage" */ '@/pages/IntegratedSearchPage' + ); return { Component: IntegratedSearchPage }; }, }, { path: `${PATH.SEARCH}/:searchVariant`, async lazy() { - const { SearchPage } = await import('@/pages/SearchPage'); + const { SearchPage } = await import(/* webpackChunkName: "SearchPage" */ '@/pages/SearchPage'); return { Component: SearchPage }; }, },