Skip to content

Refactor(client): bundle size optimization #199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
constantly-dev wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Refactor(client): bundle size optimization #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f080fd2
chore: bundle ์‹œ๊ฐํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์˜์กด ์ถ”๊ฐ€
constantly-dev Nov 12, 2025
cbe69ac
refactor: lazy๋ฅผ ํ†ตํ•œ ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ… ๋ฆฌํŒฉํ„ฐ๋ง
constantly-dev Nov 12, 2025
61f2d32
chore: rollup bundle visualizer ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ถ”๊ฐ€
constantly-dev Nov 12, 2025
3b5affc
refactor: manualChunks๋กœ ๋ฒˆ๋“ค ๋ถ„๋ฆฌ ๊ตฌ์ฒดํ™”
constantly-dev Nov 12, 2025
a41e651
chore: ๋ถˆํ•„์š” ํŒŒ์ผ ์ œ๊ฑฐ
constantly-dev Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions apps/client/src/layout/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Outlet,useLocation } from 'react-router-dom';
import { Outlet, useLocation } from 'react-router-dom';
import { Sidebar } from '@shared/components/sidebar/Sidebar';
import { Suspense } from 'react';

const Layout = () => {
const location = useLocation();
Expand All @@ -8,9 +9,11 @@ const Layout = () => {
return (
<>
<div className="flex h-screen">
{!isOnboarding && <Sidebar />}
{!isOnboarding && <Sidebar />}
<main className="bg-gray-bg flex-1 overflow-y-auto">
<Outlet />
<Suspense fallback={<div>Loading...</div>}>
<Outlet />
</Suspense>
</main>
</div>
</>
Expand Down
12 changes: 7 additions & 5 deletions apps/client/src/routes/router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import Category from '@pages/category/Category';
import Level from '@pages/level/Level';
import MyBookmark from '@pages/myBookmark/MyBookmark';
import OnBoarding from '@pages/onBoarding/OnBoarding';
import Remind from '@pages/remind/Remind';
import { ROUTES_CONFIG } from '@routes/routesConfig';
import { createBrowserRouter } from 'react-router-dom';
import Layout from 'src/layout/Layout';
import { lazy } from 'react';

const MyBookmark = lazy(() => import('@pages/myBookmark/MyBookmark'));
const Category = lazy(() => import('@pages/category/Category'));
const Level = lazy(() => import('@pages/level/Level'));
const OnBoarding = lazy(() => import('@pages/onBoarding/OnBoarding'));

export const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children: [
{
path: ROUTES_CONFIG.remind.path,
index: true,
element: <Remind />,
},
{
Expand Down
23 changes: 22 additions & 1 deletion apps/client/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { defineConfig } from 'vite';
import { resolve } from 'path';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
import { visualizer } from 'rollup-plugin-visualizer';

// https://vite.dev/config/
export default defineConfig({
Expand All @@ -17,12 +18,32 @@ export default defineConfig({
symbolId: 'icon-[name]',
inject: 'body-last',
}),
visualizer({ filename: 'dist/bundle-analysis.html', open: true }),
],
build: {
rollupOptions: {
output: {
manualChunks: (id: string) => {
if (
id.includes('node_modules/react/') ||
id.includes('node_modules/react-dom/') ||
id.includes('node_modules/react-router-dom/')
) {
return '@react-vendor';
Comment on lines +27 to +32
Copy link
Collaborator

@jllee000 jllee000 Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

์˜น ์ด๋Ÿฐ์‹์œผ๋กœ, ๋ฌด๊ฑฐ์šด ์ฒญํฌ๋“ค์„ ๋ถ„๋ฆฌํ•˜๊ณ  ์ตœ์ ํ™”ํ•˜๋Š”๊ตฐ๋…€~! ๊ตฟ๊ตฟ

}
if (id.includes('node_modules/framer-motion/')) {
return '@framer-motion-vendor';
}
},
},
},
},

resolve: {
alias: {
'@': resolve(__dirname, './src'),
'@api': resolve(__dirname, './src/api'),
'@assets':resolve(__dirname,'./src/assets'),
'@assets': resolve(__dirname, './src/assets'),
'@utils': resolve(__dirname, './src/utils'),
'@constants': resolve(__dirname, './src/constants'),
'@shared-types': resolve(__dirname, './src/types'),
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"playwright": "^1.55.0",
"prettier": "^3.6.2",
"prettier-plugin-tailwindcss": "^0.6.14",
"rollup-plugin-visualizer": "^6.0.5",
"storybook": "^9.1.3",
"turbo": "^2.5.6",
"typescript": "5.9.2",
Expand Down
31 changes: 31 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading