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

올리브영 B2B 물류 스쿼드는 모놀로식 레거시 시스템을 AWS 기반의 신규 플랫폼으로 전환하는 과정에서 발생한 **SPA(Single Page Application)**의 성능 저하 문제를 해결하기 위해 최적화 작업을 진행했다.

주요 최적화 단계는 다음과 같다:

• Webpack을 이용한 코드 스플리팅 및 번들링 분리
• CSS 최적화 및 Font 압축
• Nginx를 통한 gzip 압축 및 정적 파일 캐싱 적용

특히 용량이 큰 폰트 파일(NotoSans, 3.8MB)의 경우, file-loader를 사용하여 번들링을 분리함으로써 72B 수준으로 압축하는 성과를 거두었다. 이를 통해 웹 페이지 로딩 시간을 기존 1.6~2.5초에서 0.2초까지 대폭 단축했다.

또한, axios-cache-interceptor를 도입하여 API 응답 데이터를 브라우저의 Local storage에 저장하는 캐싱 전략을 적용했다. 이는 반복적인 API 호출을 줄여 네트워크 통신을 최소화하고, Vuex와 연동하여 데이터 재사용성을 높임으로써 사용자 경험을 개선했다.