프론트엔드 개발자 엄성준 블로그

  • 홈
  • 태그

react-router-dom 1

React Lazy + Suspense 사용 시 페이지 전환 깜빡임(흰 화면) 문제 해결

이전에 WiniLogis 프로젝트의 성능 최적화를 진행하면서 코드 스플리팅을 적용한 경험이 있습니다. 기존에는 SPA 특성상 메인 페이지에 접속하면 모든 페이지의 리소스가 하나의 JS 파일로 번들링되어 로드되고 있었습니다.이로 인해 초기 로딩 시 불필요한 코드까지 함께 로드되는 문제가 있었습니다. 이를 개선하기 위해 React의 Lazy와 Suspense를 활용하여 도메인 단위로 파일을 분리하고, 필요한 시점에만 리소스를 불러오도록 구조를 변경했습니다. 그 결과 메인 페이지에서 로드되는 코드 양을 281,862줄 → 63,303줄로 줄이며 성능을 개선할 수 있었습니다. 또한 이외에도 이미지 리소스 최적화, i18n 기반 다국어 처리 개선 등을 함께 진행하며 전반적인 성능 점수와 접근성 점수도 개선할 수 ..

지식 정리 📝 2026.03.23
이전
1
다음
더보기
프로필사진

꾸준함을 강점으로 삼고 있는 프론트엔드 개발자 엄성준 블로그입니다.

250x250
  • 카테고리 📂 (396)
    • 코딩 테스트 풀이 🛠 (232)
    • 지식 정리 📝 (92)
    • zero-base 프론트엔드 스쿨 ⛪️ (20)
    • 3월 협업 프로젝트(1석 4조) 👨‍👩‍👧‍👦 (19)

Tag

split(), next.js, 프론트엔드 개발자 엄성준, 프로그래머스, sort(), 오토위니, WiniLogis, exceljs, 엄성준, forEach(), react, 프론트엔드 개발자, 제로베이스 프론트엔드 스쿨, autowini, 프론트엔드, Number(), 제로베이스, join(), 프론트엔드 스쿨, String(),

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

방문자수Total

  • Today :
  • Yesterday :

꾸준함이 강점이자 자랑인 프론트엔드 개발자 엄성준 입니다.

  • Github
  • 📷 Instar
  • 🎨Portfolio

티스토리툴바