166 vue 배포 파일 용량 큰 문제 해결

source: categories/study/vue-experiance/vue-experiance_9-99_67.md

166 vue 배포 파일 용량 큰 문제 해결

원인
1. 소스맵 6.6mb (용량 큰건…) 빌드시 안나오도록
2. 1.7mb -> 244kb 이하로 코드 스플리팅
해결
- production 일땐 소스맵 끄는 옵션 추가
- 커스텀 명령어에서 NODE_ENV 값 production으로 바꿔주기 (내재되어있는 build 명령어는 production으로 설정되어있음, 하지만 커스텀 명령어 또는 serve는 development로 설정되어있음)

소스맵 끄기

// vue.config.js에 아래 속성 추가
productionSourceMap: false
  

// package.json 명령어에 아래 NODE_ENV 설정
"build-test": "NODE_ENV=production vue-cli-service build --mode developmenttest",
"build-prod": "NODE_ENV=production vue-cli-service build --mode developmentprod",
  

코드 스플리팅

optimization: {
  splitChunks: {
    minSize: 10000,
    maxSize: 250000,
  },
},
  

앞으로의 과제 (개선해야될 것들)

현상황

코드들이 절차지향으로 짜여있어 코드 분석시 큰 비용 발생
유지보수 어려움

회의내용

개선방안 논의
객체지향 or 함수형 리팩토링 (러닝 커브 이슈)
Composition API 도입 (객체지향, 함수형 도입 가능)

진행내용

기능별로 코드 정리 진행중
기능별로 폴더 구조 재정리중

기대효과

유지보수 비용 감소

로딩속도 지속해서 개선

회의주제: 로딩 속도를 떨어트리는 주요 원인

PC기준 prod, test 서버 확인했을 때, chunk-vendor.js 파일 용량 7.7mb, 로딩 속도 대략 1초 정도 걸리는 것으로 확인
해당 파일 로딩시 병목현상 발생
chunk 파일 기준 권고 용량 244kb 보다 훨씬 큰 용량이기 때문에 이 파일이 주된 원인이라고 파악

부수 요인들

api 여러번 호출하는 문제
font 파일

회의결론

chunk 파일 용량 개선 및 코드 스플리팅 우선 진행
부수 요인들은 추후 개선 진행

수정결과

수정 전후, 로딩 속도 측정시 대략 60% 정도 개선된 것으로 측정됨
하지만 이는 PC 기준이므로 현장 wifi를 연결한 모바일 환경에서는 다른 결과가 나올 수도 있음 (현장 테스트 필요)

hyungju-lee

master