Skip to content

Commit 71bea0a

Browse files
cjeongmingithub-actions[bot]
cjeongmin
and
github-actions[bot]
authored
refactor(fe): improve lighthouse performance (#19)
* feat: add rollup-plugin-visualizer for build analysis * refactor: optimize font loading in index.html and remove unused imports in index.css * refactor: implement code-splitting for improved performance using React.lazy * chore: regenerate pnpm-lock.yaml * refactor: wrap LazyHomePage in React.Suspense for improved lazy loading * chore: regenerate pnpm-lock.yaml * chore: auto-fix linting and formatting issues --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 5fb8c92 commit 71bea0a

File tree

10 files changed

+2439
-2458
lines changed

10 files changed

+2439
-2458
lines changed

‎apps/client/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,31 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
6+
<link rel="preconnect" href="https://fonts.gstatic.com" />
7+
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
10+
<link
11+
rel="preload"
12+
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
13+
as="style"
14+
onload="this.onload=null;this.rel='stylesheet'"
15+
/>
16+
<link
17+
rel="preload"
18+
href="https://fonts.googleapis.com/css2?family=ADLaM+Display&display=swap"
19+
as="style"
20+
onload="this.onload=null;this.rel='stylesheet'"
21+
/>
22+
<noscript>
23+
<link
24+
rel="stylesheet"
25+
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
26+
/>
27+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=ADLaM+Display&display=swap" />
28+
</noscript>
29+
530
<link rel="icon" type="image/svg+xml" href="/ask-it.svg" />
631
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
732
<title>Ask-It</title>

‎apps/client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"postcss": "^8.4.47",
5757
"prettier": "3.3.3",
5858
"prettier-plugin-tailwindcss": "^0.6.8",
59+
"rollup-plugin-visualizer": "^5.14.0",
5960
"tailwindcss": "^3.4.14",
6061
"typescript": "^5.5.3",
6162
"typescript-eslint": "^8.7.0",

‎apps/client/src/index.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
2-
@import url('https://fonts.googleapis.com/css2?family=ADLaM+Display&display=swap');
3-
41
@tailwind base;
52
@tailwind components;
63
@tailwind utilities;

‎apps/client/src/routes/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { createFileRoute } from '@tanstack/react-router';
2+
import React from 'react';
23

34
import { refresh, useAuthStore } from '@/features/auth';
45

5-
import { HomePage } from '@/pages';
6+
const LazyHomePage = React.lazy(() => import('@/pages').then((module) => ({ default: module.HomePage })));
67

78
export const Route = createFileRoute('/')({
89
beforeLoad: () => {
@@ -15,5 +16,9 @@ export const Route = createFileRoute('/')({
1516
})
1617
.catch(console.error);
1718
},
18-
component: HomePage,
19+
component: () => (
20+
<React.Suspense>
21+
<LazyHomePage />
22+
</React.Suspense>
23+
),
1924
});

‎apps/client/src/routes/my.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import { createFileRoute, redirect } from '@tanstack/react-router';
2+
import React from 'react';
23

34
import { refresh, useAuthStore } from '@/features/auth';
45

5-
import { MyPage } from '@/pages';
6+
const LazyMyPage = React.lazy(() => import('@/pages').then((module) => ({ default: module.MyPage })));
67

78
export const Route = createFileRoute('/my')({
8-
component: MyPage,
9+
component: () => (
10+
<React.Suspense>
11+
<LazyMyPage />
12+
</React.Suspense>
13+
),
914
beforeLoad: () => {
1015
const { isLogin, setAuthInformation } = useAuthStore.getState();
1116

‎apps/client/src/routes/session/$sessionId/$questionId/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { createFileRoute, isRedirect, redirect } from '@tanstack/react-router';
2+
import React from 'react';
23

34
import { loadSessionData, useSessionStore } from '@/features/session';
45

5-
import { QuestionDetail } from '@/components';
6+
const LazyQuestionDetail = React.lazy(() =>
7+
import('@/components').then((module) => ({ default: module.QuestionDetail })),
8+
);
69

710
export const Route = createFileRoute('/session/$sessionId/$questionId/')({
8-
component: QuestionDetail,
11+
component: LazyQuestionDetail,
912
beforeLoad: async ({ params: { sessionId, questionId } }) => {
1013
const { fromDetail } = useSessionStore.getState();
1114

‎apps/client/src/routes/session/$sessionId/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createFileRoute, redirect } from '@tanstack/react-router';
2-
import { useEffect } from 'react';
2+
import React, { useEffect } from 'react';
33

44
import { loadSessionData, useSessionStore } from '@/features/session';
55

6-
import { QuestionList } from '@/components';
6+
const LazyQuestionList = React.lazy(() => import('@/components').then((module) => ({ default: module.QuestionList })));
77

88
function SessionComponent() {
99
const { sessionTitle } = useSessionStore();
@@ -14,7 +14,7 @@ function SessionComponent() {
1414
}
1515
}, [sessionTitle]);
1616

17-
return <QuestionList />;
17+
return <LazyQuestionList />;
1818
}
1919

2020
export const Route = createFileRoute('/session/$sessionId/')({

‎apps/client/src/routes/session/route.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { createFileRoute, Outlet, redirect, ScrollRestoration } from '@tanstack/react-router';
2+
import React from 'react';
23

34
import { SocketProvider } from '@/features/socket';
45

5-
import { ChattingList } from '@/components';
6+
const LazyChattingList = React.lazy(() => import('@/components').then((module) => ({ default: module.ChattingList })));
67

78
export const Route = createFileRoute('/session')({
89
beforeLoad: ({ location }) => {
@@ -13,7 +14,7 @@ export const Route = createFileRoute('/session')({
1314
<SocketProvider>
1415
<ScrollRestoration />
1516
<Outlet />
16-
<ChattingList />
17+
<LazyChattingList />
1718
</SocketProvider>
1819
</div>
1920
),

‎apps/client/vite.config.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
import { defineConfig, loadEnv } from 'vite';
22
import react from '@vitejs/plugin-react';
33
import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
4+
import { visualizer } from 'rollup-plugin-visualizer';
45

56
// https://vite.dev/config/
67
export default defineConfig(({ mode }) => {
78
const env = loadEnv(mode, process.cwd(), '');
89

910
return {
1011
base: mode === 'production' ? env.VITE_STATIC_URL : '/',
11-
plugins: [TanStackRouterVite(), react()],
12+
plugins: [
13+
TanStackRouterVite(),
14+
react(),
15+
visualizer({
16+
filename: './dist/stats.html',
17+
}),
18+
],
1219
resolve: {
1320
alias: {
1421
'@': '/src',

0 commit comments

Comments
 (0)