Skip to content
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.

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

feat: 코드 스플리팅 적용 #299

Closed
wants to merge 7 commits into from
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
4 changes: 2 additions & 2 deletions src/pages/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ export { default as ArticlesPage } from './ArticlesPage';
export { default as ArticleDetailPage } from './ArticleDetailPage';
export { default as ProfilePage } from './ProfilePage';
export { default as SearchPage } from './SearchPage';
export { default as SignUpPage } from './SignupPage';
// export { default as SignUpPage } from './SignupPage';
export { default as ProfileEditPage } from './ProfileEditPage';
export { default as ChangePasswordPage } from './ChangePasswordPage';
export { default as LoadingPage } from './LoadingPage';
export { default as ProtectedRouter } from './ProtectedRouter';
export {default as ArticleEditPage} from './ArticleEditPage';
export { default as ArticleEditPage } from './ArticleEditPage';
42 changes: 29 additions & 13 deletions src/utils/Router.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,39 @@
/* eslint-disable react-refresh/only-export-components */
import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';
import App from '@/App';
import {
HomePage,
LandingPage,
NotFoundPage,
SignUpPage,
SearchPage,
ProfilePage,
LoginPage,
NewArticlePage,
ArticleDetailPage,
NotificationPage,
ArticlesPage,
ProfileEditPage,
ChangePasswordPage,
ProtectedRouter,
ArticleEditPage,
// NotFoundPage,
// SignUpPage,
// SearchPage,
// ProfilePage,
// LoginPage,
// NewArticlePage,
// ArticleDetailPage,
// NotificationPage,
// ArticlesPage,
// ProfileEditPage,
// ChangePasswordPage,
// ProtectedRouter,
// ArticleEditPage,
} from '@pages/index';

const SignUpPage = lazy(() => import('@pages/SignUpPage'));
const SearchPage = lazy(() => import('@pages/SearchPage'));
const ProfilePage = lazy(() => import('@pages/ProfilePage'));
const NotFoundPage = lazy(() => import('@pages/NotFoundPage'));
const LoginPage = lazy(() => import('@pages/LoginPage'));
const NewArticlePage = lazy(() => import('@pages/NewArticlePage'));
const ArticleDetailPage = lazy(() => import('@pages/ArticleDetailPage'));
const NotificationPage = lazy(() => import('@pages/NotificationPage'));
const ArticlesPage = lazy(() => import('@pages/ArticlesPage'));
const ProfileEditPage = lazy(() => import('@pages/ProfileEditPage'));
const ChangePasswordPage = lazy(() => import('@pages/ChangePasswordPage'));
const ProtectedRouter = lazy(() => import('@pages/ProtectedRouter'));
const ArticleEditPage = lazy(() => import('@pages/ArticleEditPage'));

const router = createBrowserRouter([
{
path: '/',
Expand Down
23 changes: 23 additions & 0 deletions vite.config.ts → vite.config.mts
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
import path from 'path';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import { dependencies } from './package.json';

const renderChunks = (deps: Record<string, string>) => {
const chunks = {};
Object.keys(deps).forEach((key) => {
if (['react', 'react-router-dom', 'react-dom'].includes(key)) {
return;
}
chunks[key] = [key];
});
return chunks;
};

// https://vitejs.dev/config/
export default defineConfig({
Expand All @@ -19,4 +31,15 @@ export default defineConfig({
{ find: '@utils', replacement: path.resolve(__dirname, 'src/utils') },
],
},
build: {
sourcemap: false,
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-router-dom', 'react-dom'],
...renderChunks(dependencies),
},
},
},
},
});