프론트엔드
B2B 물류 스쿼드 백오피스 프론트엔드 성능 개선
두줄요약
신규 백오피스의 SPA 성능 저하를 코드 스플리팅, Nginx 압축, 정적 캐싱으로 개선했습니다.\n브라우저 API 캐싱과 Vuex를 함께 사용해 로딩 시간과 중복 호출을 줄였습니다.
문제 상황
- 모놀리식 레거시를 분리한 신규 백오피스 플랫폼에서 화면과 프론트 라이브러리 증가로 SPA 초기 로딩 성능 저하 발생
- 브라우저 로드 용량 증가와 모든 파일 일괄 번들링 구조로 초기 구동 속도 악화
- 보안 제약으로 CDN 도입이 어려워 대용량 폰트 최적화가 추가 난관
해결 방법
- 대용량 라이브러리와 CSS를 코드 스플리팅 및 번들 분리로 처리
- Nginx gzip 압축, 정적 파일 서빙, 정적 캐싱 적용
- 폰트를 file-loader로 분리 번들링해 압축·캐싱 가능하게 구성
성능/운영 포인트
- Performance-Analyser 기준 로딩 시간 1.6~2.5초에서 0.7초, 캐싱 적용 후 0.2초 수준으로 개선
- axios-cache-interceptor로 Local storage 기반 API 캐싱 적용
- Vuex와 Local storage를 함께 사용해 공통 정적 데이터 재사용과 중복 API 호출 감소