vue.js 용량 줄이기

🌐

---

vue.js 나 react 를 사용하다보면 여기저기 라이브러리들 설치하고 사용하니

점점 사이즈가 커져버리고 있다

사이즈 줄이기 위한 노력은 지속적으로 하는 게 맞는 것 같다

1. 번들 현황 보고

vue-cli 를 사용하여 번들 리포트 작성

# package.json
# script 추가한다
"build-report": "vue-cli-service build --report"

# 위에서 만든 스크립트 실행
npm run build-report

2. 번들 사이즈 줄이기

• echarts (stat size: 2.7mb, parsed: 814kb, gzipped: 270.7kb)

• bootstrap-vue (stat size: 772kb, parsed: 297kb, gzipped: 69kb)

더 작은 대체 라이브러리 찾기

트리쉐이킹 가능한지 확인해서 줄이기

3. 미사용 CSS 줄이기

부트스트렙의 예제 Theming Bootstrap

4. 이미지 압축

Compress-Or-Die 같은 온라인 서비스를 이용하던지 아니면 이미지 압축 기능을 만들어서 이미지들을 압축시켜서 production 에 반영하는 방법을 추천한다

Uploaded by N2T