핵심 요약
올리브영의 B2B 물류 스쿼드가 백오피스 프런트의 성능을 대폭 개선했다. 초기 로딩 1.6–2.5초를 0.7초로 단축하고, 캐시 도입으로 0.2초까지 더 빠르게 로드했다.
구현 방법
- 대용량 라이브러리의 코드 스플리팅/Webpack 분리
- CSS 최적화 및 폰트 압축: NotoSans 3.8MB를 72B로 축소
- Nginx gzip 압축 및 정적 파일 캐싱
- axios-cache-interceptor로 LocalStorage 기반 API 캐싱
- LocalStorage를 Redis처럼 활용하고 Vuex로 데이터 공유
- Strangler Pattern으로 모놀로를 신규 플랫폼으로 이관
주요 결과
- 로딩 시간 0.7초/캐시 적용 시 0.2초 달성
- NotoSans 폰트 용량 대폭 감소
- 브라우저 캐싱과 Vuex 데이터 관리로 중복 API 호출 감소
