B2B 물류 스쿼드 백오피스 프론트엔드 성능 개선

간단 소개

B2B 물류 스쿼드의 백오피스 프론트엔드 성능 개선 사례: Webpack, Browser Cache, Vuex 등을 활용한 SPA 최적화 전략 및 효과.

AI Summary

프론트엔드 성능 개선 배경
- B2B 물류 스쿼드는 오프라인 발주 및 물류 시스템 담당, 레거시 시스템에서 신규 플랫폼으로 전환
- 프론트엔드와 백엔드 분리 후 AWS 기반 백오피스 신규 플랫폼 구축, 스트랭글러 패턴 적용
- 플랫폼 오픈 후 개발 요청 급증, 프론트 라이브러리 증가로 SPA 성능 저하 발생
주요 최적화 방법
- 코드 스플리팅 및 Webpack을 사용한 번들링 분리 저장, CSS 파일 최적화, 폰트 압축
- Nginx를 통한 gzip 압축 적용 및 정적 파일 서빙, 정적 파일 캐싱
- axios-cache-interceptor 라이브러리를 사용한 브라우저 API 데이터 캐싱
- Vuex를 활용하여 공통 코드와 정적 데이터 효율적 관리 및 재사용
최적화 결과 및 효과
- 로딩 시간 1.6~2.5초에서 0.7초로 단축, 추가 캐싱으로 0.2초까지 단축
- 폰트 압축률 극대화 (NotoSans 3.8MB에서 72B로 압축)
- SPA 반복 API 호출 감소, 초기 로딩 시간 단축, DOM 컨텐츠 로딩 속도 개선, DB Connection 횟수 감소