강디너의 개발 일지

Vue - bundle size 분할하기 본문

Javascript/Vue

Vue - bundle size 분할하기

강디너 2019. 8. 25. 23:55
728x90
반응형

문제점 : 한 파일의 용량이 커서 페이지가 늦게 뜨는 현상이 발생했다.

 

상황

1. About.vue 안에 header.vue, main.vue, 기타1 기타2 등등 들어있음.

About.vue

2. 메인, 기타1, 기타2 등등 이미지 용량이 커서 About.vue를 불러오면 너무 오래걸림 (약15초)

 

3. 빌드를 통해 js 형태로 배포하는데 js의 크기가 커서 분리시키기로 결심

 

 

해결 방안

1. webpackchunkname

https://router.vuejs.org/kr/guide/advanced/lazy-loading.html

 

지연된 로딩 | Vue Router

지연된 로딩 번들러를 이용하여 앱을 제작할 때 JavaScript 번들이 상당히 커져 페이지로드 시간에 영향을 줄 수 있습니다. 각 라우트의 컴포넌트를 별도의 단위로 분할하고 경로를 방문할 때 로드하는 것이 효율적일 것입니다. Vue의 비동기 컴포넌트 와 Webpack의 코드 분할 을 결합합니다. 라우트 컴포넌트를 쉽게 불러올 수 있습니다. 첫째, 비동기 컴포넌트는 Promise를 반환하는 팩토리 함수로 정의할 수 있습니다 (컴포넌트가 resolve 되어

router.vuejs.org

 

webpackchunkname 를 이용해서 빌드하면 메인, 기타1, 기타2 등 자신이 설정한 대로 나뉘어서 저장됩니다.

그러면 빌드된 about.js, main.js, 기타.js 등 따로 만들어지게 되며 크기가 나뉘어지게 됩니다.

 

결국 각각의 js파일로 로드해서 속도를 감소시키켰습니다.

 

'Javascript > Vue' 카테고리의 다른 글

Vue - filters 기능 이용한 콤마 찍기  (0) 2019.09.23
Vue - watch를 이용한 정규식 사용  (0) 2019.09.16
Vue - bundle size 분할하기  (0) 2019.08.25
Vue - Event Bus 사용법  (0) 2019.08.19
Vue에 익숙해지기 - Bingo(2)  (0) 2019.07.22
Vue에 익숙해지기 - Bingo(1)  (0) 2019.06.27
커피한잔...
0 Comments
댓글쓰기 폼