B2B 물류 백오피스, 프론트엔드 성능 개선으로 쾌적한 사용자 경험 제공!
by DD
2년 전
조회수 6
SPA의 단점을 보완하기 위해 Webpack을 활용한 번들링 최적화를 진행함
폰트 압축 및 브라우저 API 캐싱을 통해 페이지 로딩 시간 70% 단축
Vuex를 활용하여 API 호출 빈도 감소 및 데이터 재사용성을 향상시킴
Webpack을 활용한 번들링 최적화
Webpack을 사용하여 코드 스플리팅을 적용하고, 번들링 분리를 통해 초기 로딩 속도를 개선했다. 구체적으로, CSS 파일 최적화, 폰트 압축 등을 진행하여 번들 사이즈 감소를 달성했다. 따라서, 사용자 경험을 향상시키고, SPA의 단점을 보완했다.
브라우저 캐싱 전략: axios-cache-interceptor
axios-cache-interceptor를 활용하여 브라우저 API 데이터 캐싱을 구현했다. Local Storage에 API 응답을 저장하여, 불필요한 API 호출을 줄였다. API 호출 시간 단축 및 DOM 컨텐츠 로딩 속도 개선을 통해, 사용자 체감 속도를 향상시켰다. 따라서, SPA의 단점을 보완했다.
Vuex를 활용한 데이터 관리
Vuex를 사용하여 공통 데이터를 효율적으로 관리하고, 컴포넌트 간 데이터 재사용성을 높였다. API 호출 빈도 감소를 통해, DB Connection 횟수 감소를 달성했다. 결과적으로, SPA의 단점을 보완하고, 전반적인 성능 향상을 이끌어냈다.
