웹 팩 으로 Vue . JS 번들 크기 를 줄이 는 방법 | 웹 팩 으로 Vue . JS 번들 크기 를 줄이 는 방법 
 웹 팩 으로 Vue . JS 번들 크기 를 줄이 는 방법 
 작성자 : Jennifer Bland 
 원문 : https : / / medium . com / js - dojo / how - to - reduce - your - vue - js - bundle - size - with - webpack - 3145 bf 5019 b 7 
 필자 는 Stanley Black & Decker 의 Industry 4 . 0 팀 에서 일 하 고 있 다 . 최근 우리 팀 은 세계 적 인 Stanley 의 제조 공장 을 위해 앱 스토어 와 같 은 것 을 만들 었 다 . 공장 들 은 온라인 시장 에 방문 하 여 해당 지역 에서 생산 하 는 제품 을 기반 으로 필요 한 애플리케이션 을 선택 할 수 있 다 . 이렇게 하 면 공장 을 돌리 기 위해 모든 애플리케이션 을 함께 번들 로 묶 은 커스텀 빌드 가 만들 어 진다 . 그러나 이렇게 많 은 양 의 애플리케이션 을 번들 로 묶 어 Vue 를 프로덕션 빌드 하 면 크기 가 초과 되 었 다는 경고 가 여러 번 나타난다 . 
 초기 빌드 크기 
 빌드 를 하 면 다음 두 가지 에러 메시지 가 발생 한다 . 
 Vue 는 번들 된 각 에 셋 의 크기 가 244 KiB 를 초과 하 지 않 을 것 을 권장 한다 . 우리 는 이 크기 를 초과 한 14 개 의 에 셋 을 가지 고 있 었 다 . 추가 로 위 에서 권장 한 크기 를 초과 한 네 개 의 엔트리 포인트 파일 도 있 었 다 . 지금 부터 빌드 파일 크기 를 반 으로 줄이 는 방법 을 소개 한다 . 
 크기 가 큰 번들 파일 의 원인 은 무엇 인가 ? 
 먼저 크기 가 큰 번들 파일 의 원인 을 알 아야 했 다 . 원인 을 찾 기 위해 webpack - bundle - analyzer 를 설치 했 다 . 이 플러그인 은 각 번들 아이템 의 크기 를 시각 적 인 가이드 로 제공 해 준다 . 
 그 다음 vue . config . js 파일 에서 이것 을 사용 하 기 위해 webpack 설정 을 했 다 . 필자 가 vue . config . js 파일 에 설정 한 내용 은 다음 과 같 다 . 
 플러그인 을 설치 하 고 프로덕션 빌드 를 다시 실행 하 면 번들 파일 크기 가 2 . 48 MB 로 나온다 . 이미지 를 보 면 큰 용량 의 범인 을 명확히 알 수 있 다 . 
 Lodash 크기 줄이 기 
 Lodash 는 번들 파일 의 70 . 74 kb 를 차지 하 고 있 었 다 . Lodash 는 프레임워크 의 모든 애플리케이션 에서 두 곳 에서 만 사용 된다 . 단지 2 개 메 서 드 때문 에 번들 크기 의 많 은 양 이 차지 되 고 있 다 . 
 lodash 뿐 만 아니 라 vue - lodash 도 가져오 고 있 었 다 . 문제 를 해결 하 는 첫 번 째 단계 는 필요 하 지 않 은 vue - lodash 를 package . json 에서 제거 하 는 것 이 다 . 
 다음 단계 는 lodash 전체 라이브러리 를 가져오 는 대신 필요 한 2 개 메 서 드 만 가져오 도록 하 는 것 이 다 . 우리 는 cloneDeep 과 sortBy 를 사용 하 고 있 었 다 . lodash 전체 라이브러리 를 가져오 던 초기 호출 방식 을 변경 했 다 . 
 lodash 에서 lodash / core 로 import 구문 을 변경 해 필요 한 2 개 메 서 드 만 가져오 도록 변경 했 다 . 
 이러 한 변경 으로 번들 파일 크기 가 2 . 48 MB 에서 2 . 42 MB 로 줄어들 었 다 . 다음 이미지 는 현재 줄어든 번들 크기 를 보여준다 . 
 그리고 여기 서 번들 파일 의 부분 으로 lodash 자체 크기 를 볼 수 있 다 . 
 moment . js 크기 줄이 기 
 Moment . js 는 번들 파일 에서 234 . 36 KB 를 차지 하 고 있 었 다 . 이전 이미지 를 보 면 지원 하 는 모든 언어 에 대한 국제 화 로케 일 이 압도 적 으로 큰 용량 을 차지 한 것 을 볼 수 있 다 . 번들 파일 에서 는 moment . js 전체 를 사용 하 지 않 으므로 불 필요 한 용량 을 차지 할 뿐 이 다 . 
 다행히 도 이 를 제거 할 수 있 다 . 다음 호출 로 moment . js 전체 를 가져오 는 대신 , 
 이 호출 을 통해서 날짜 조작 코드 만 가져올 수 있 다 . 
 하지만 우리 의 코드 베이스 에서 적어도 이 대체 코드 를 만드 는 것 만 으로 는 어려움 이 있 다 . 코드 의 18 곳 에서 moment . js 를 가져오 고 있 었 다 . 전체 검색 을 해서 코드 를 변경 할 수 있 었 다 . 그러나 프레임워크 에 새 애플리케이션 을 추가 할 경우 , 개발자 가 기본 호출 을 사용 하 여 moment . js 를 가져올 수 있 다 . 그렇게 하 면 우리 는 또 다시 모든 국제 화 로케 일 을 가져오 게 된다 . 
 그래서 트레이드오프 로 웹 팩 에서 숏 컷 별칭 을 만들 었 다 . 숏 컷 은 ' moment ' 를 ' moment / src / moment ' 로 가져오 는 모든 호출 을 대체 한다 . resolve 옵션 을 사용 하 고 별칭 을 설정 하 여 vue . config . js 파일 에 별칭 을 추가 할 수 있 다 . 다음 은 필자 가 설정 한 vue . config . js 파일 이 다 . 
 현재 프로덕션 빌드 를 실행 하 면 번들 파일 크기 가 2 . 22 MB 로 줄어들 었 다 . 
 이미지 에서 moment . js 를 보 면 국제 화 로케 일 이 더 이상 로드 되 지 않 는 것 을 볼 수 있 다 . 
 moment . js 에서 로케 일 을 제거 하 면 , 서버 를 실행 할 때 마다 코드 에서 . / locale 를 찾 을 수 없 다고 에러 가 발생 한다 . 이 문제 에 대해서 찾아보 니 이전 부터 있 었 던 moment . js 의 노 운 이슈 인 것 을 알 게 되 었 다 . moment . js 는 로케 일 을 항상 로드 한다고 가정 한다 . 날짜 조작 기능 만 로드 할 수 는 없 다 . 
 이 를 해결 하 기 위해 빌트인 웹 팩 플러그인 IgnorePlugin 을 사용 해 이 메시지 를 무시 했 다 . 다음 은 필자 가 vue . config . js 파일 에 추가 한 플러그인 코드 다 . 
 Vuetify . js 크기 줄이 기 
 다음 목표 는 Vuetify . js 의 크기 다 . Vuetify 는 500 . 78 KB 를 차지 하 고 있 었 다 . 이것 은 하나 의 벤더 가 차지 하 기 에 많 은 양 이 다 . 
 Vuetify 는 마치 원 하 는 것 만 골라 담 을 수 있 는 식사 ( a - la - carte ) 같 은 기능 을 제공 한다 . 이 는 사용 하 는 Vuetify 컴포넌트 만 가져올 수 있 다는 것 을 의미 한다 . 그리고 이렇게 하 면 크기 가 줄어든다 . 문제 는 우리 가 사용 하 고 있 는 컴포넌트 를 확인 하 고 처리 하 려고 하 는 애플리케이션 이 너무 많 다는 것 이 다 . 
 현재 Vuetify 버전 ( 아티 클 을 작성 할 당시 1 . 56 버전 ) 에서 는 vuetify - loader 를 제공 하 고 있 다 . vuetify - loader 는 코드 를 살펴보 고 사용 중 인 모든 컴포넌트 를 확인 한 다음 번들 로 가져올 것 이 다 . 참고 : 결국 vuetify v 2 에 이 기능 이 내장 되 었 다 . 2 버전 을 사용 하 기 전 까지 는 사용 하 는 컴포넌트 만 가져오 기 위해 vuetify - loader 를 사용 해야 한다 . Vuetify 문서 에 따르 면 필요 한 모든 스타일 을 얻 으려면 stylus 로 가져와야 한다 . 
 필자 는 우리 가 vuetify . js 구 버전 을 실행 하 고 있 었 다는 것 을 알 게 되 었 다 . 그래서 vuetify 버전 을 최신 으로 업그레이드 하 기 로 했 다 . 또한 스타일 관련 된 것 들 과 vuetify - loader 를 같이 설치 했 다 . ( 역 자주 : vuetify 외 다른 모듈 은 -- save - dev 옵션 을 사용 하 여 devDependencies 로 설치 해야 한다 ) 
 Vuetify 를 가져오 는 플러그인 코드 에 는 테마 가 회사 의 색 상표 를 사용 하 도록 정의 되 어 있 다 . 현재 필자 의 Vuetify 플러그인 은 다음 과 같 다 . 
 vuetify / lib 으로 가져오 기 위해 Vuetify import 방식 을 변경 해야 한다 . 또한 모든 스타일 을 얻 기 위해 stylus 를 import 했 다 . 현재 필자 의 플러그인 코드 는 다음 과 같 다 . 
 마지막 단계 는 사용 하 는 컴포넌트 만 가져올 수 있 도록 웹 팩 에서 vuetify - loader 플러그인 을 설정 하 는 것 이 다 . 플러그인 을 require 로 가져오 고 배열 로 플러그인 을 추가 한다 . 필자 의 vue . config . js 는 다음 과 같 다 . 
 현재 실행 된 프로덕션 용 번들 파일 크기 는 2 MB 가 되 었 다 . 
 vue - echarts 크기 줄이 기 
 Vue - echarts 는 필자 의 번들 파일 에서 그다지 크 지 않 은 요소 이 다 . Vue - echarts 는 echarts 위 에서 실행 된다 . Vuetify 와 같이 Vue - echarts , echarts 도 구 버전 을 실행 하 고 있 다 . 두 모듈 을 최신 버전 으로 업그레이드 하 기 위해 다음 명령어 를 실행 한다 . 
 필자 는 vue - echarts 의 깃 헙 레 포 를 조사 하 다가 클로즈 된 이슈 들 중 에서 다음 내용 을 찾 았 다 . 최신 버전 의 vue - echarts 를 사용 하 면 가져오 는 코드 를 변경 해 더 작 은 크기 의 번들 을 로드 할 수 있 다 . 이전 에 는 이렇게 vue - echarts 를 가져오 고 있 었 는데 , 
 이렇게 변경 했 다 . 
 프로덕션 빌드 를 실행 하 면 번들 파일 크기 는 1 . 28 MB 로 줄어든다 . 
 목표 는 우리 애플리케이션 의 프로덕션 용 번들 파일 크기 를 줄이 는 것 이 었 다 . 초기 번들 파일 크기 는 2 . 48 MB 였 다 . 몇 가지 변경 을 통해서 번들 파일 크기 를 1 . 2 MB 로 줄일 수 있 었 다 . 크기 가 거의 절반 으로 줄 었 다 . 
 만약 프로덕션 용 Vue 애플리케이션 을 만든다면 당신 의 번들 파일 크기 를 평가 해 봐야 한다 . webpack - bundle - analyzer 를 사용 해 많 은 공간 을 차지 하 고 있 는 항목 을 확인 한다 . 그리고 나 서 이 항목 들 의 크기 를 줄이 기 위해 필요 한 단계 들 을 시작 한다 . 이러 한 방식 으로 필자 의 번들 파일 에서 는 네 가지 가장 큰 항목 의 크기 를 줄일 수 있 었 다 . 
 이 글 에서 설명 한 단계 를 따라서 여러분 의 프로덕션 용 번들 사이즈 도 줄일 수 있 길 바란다 . 질문 이 있 거나 코멘트 가 필요 하 다면 아래 에 남겨 달 라 . 읽 어 줘서 고맙 다 . 
 # es 6 # nodejs # bundler # devtool 
 류선 임 , FE Development Lab 2019 . 06 . 03 Back to list