프론트 성능 최적화 작업 진행 로그

import * as echarts from 'echarts';

페이지 진입
  ↓
Client Component
  ↓
Chart Component
  ↓
echarts
  ↓
대형 dependency graph
  ↓
초기 JavaScript 증가
  ↓
parse / compile / execute 비용 증가
  ↓
hydration 지연

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);

optimizePackageImports: [
  'date-fns',
  'usehooks-ts',
  '@project-a/core',
  '@project-a-team/uikit',
  'tailwind-variants',
  'echarts',
  'echarts-for-react',
],

const CommentListPanel = dynamic( 
	() => import('./CommentListPanel.client'), 
	{ ssr: false, }, 
);

Server Component 
│ 
├── static content 
│ 
└── Client boundary 
			│ 
			└── dynamic import 
						│ 
						└── CommentListPanel

export {
  ...,
  Editor,
  CompoundEditor,
  ...
} from './editor';

import { BorderScreen } from '@project-a-team/uikit/components';

// 기존 
export { 
	... 
	Editor, 
	CompoundEditor, 
	... 
} from './editor';

import { Editor } from '@project-a-team/uikit/components/editor';

export * from './button'; 
export * from './dialog'; 
export * from './datepicker'; 
export * from './editor';

import { 
	Button, 
	DatePicker, 
	SearchBar, 
} from '@project-a-team/uikit/components';

import { Button } from '@project-a-team/uikit/components/button'; 
import { DatePicker } from '@project-a-team/uikit/components/datepicker'; 
import { SearchBar } from '@project-a-team/uikit/components/searchbar';

Route Chunk
 │ 
 ├── Page-specific dependency 
 │ 
 └── Shared Chunk 
			 │ 
			 ├── Framework 
			 ├── UI library 
			 ├── Monitoring 
			 └── Unexpected dependency

React render
  ↓
DOM mutation
  ↓
Style calculation
  ↓
Layout
  ↓
Paint
  ↓
Composite

Network
  ↓
Download
  ↓
Parse / Compile
  ↓
Execute
  ↓
React Render
  ↓
DOM
  ↓
Layout / Paint

페이지 진입
  ↓
query 실행
  ↓
cache 저장
  ↓
다른 페이지 이동
  ↓
컴포넌트 remount
  ↓
refetch

HTML 발견
  ↓
LCP image 발견
  ↓
Request 우선순위
  ↓
Download
  ↓
Decode
  ↓
Paint

const accept = request.headers.get('accept') ?? '';

if (accept.includes('text/html')) {
  response.headers.set(
    'Cache-Control',
    'public, max-age=0, must-revalidate',
  );
}

HTML
→ 최신 문서 확인 필요

Static Asset
→ immutable hash 기반 장기 캐시 가능

API
→ 데이터 특성에 따라 별도 정책

Image
→ CDN / immutable asset 전략

.next/
├── standalone/
├── static/
└── ...

public/

Browser → Origin Image Server

Browser
  ↓
Next.js Image Optimization
  ↓
External Image Server
  ↓
Response
  ↓
Image processing
  ↓
Browser

30일 = 2,592,000,000ms

2,147,483,647ms

요청
 ↓
Server Component
 ↓
QueryClient
 ↓
cache 생성
 ↓
요청 종료

Request A ─┐
Request B ─┼→ Global QueryClient → Cache
Request C ─┘                         ↑
                                     │
                                계속 누적

Request A
  └── QueryClient A
       └── cache A

Request B
  └── QueryClient B
       └── cache B

pm2-runtime -i 2 --max-memory-restart 1500M

--max-old-space-size=1024

mem_limit: 4g

Code-level fix
+
Runtime limit
+
Process restart policy

fa-light-300.woff2      455KB
fa-regular-400.woff2   417KB
fa-solid-900.woff2     347KB
fa-brands-400.woff2    117KB
----------------------------
총합                  1,336KB

Browser
  │
  ├── Network
  │    ├── HTML
  │    ├── JS
  │    ├── CSS
  │    ├── Font
  │    └── Image
  │
  ├── Next.js
  │    ├── RSC
  │    ├── Client Component
  │    ├── Dynamic Import
  │    └── Cache
  │
  ├── React
  │    ├── Render
  │    ├── Hydration
  │    └── DOM
  │
  ├── Data Layer
  │    └── TanStack Query
  │
  └── Server Runtime
       ├── Node.js
       ├── V8 Heap
       ├── PM2
       └── Docker

Error Monitoring
+
Performance Monitoring
+
Business Data Freshness