Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
Tags
- jwt
- PWA
- 정리
- express
- Firebase
- 플러그인
- 뷰
- javascript
- 기획
- extension
- vuex
- vsCode
- login
- 셋팅
- Git
- 프론트
- database
- react
- nginx
- plugin
- 토이프로젝트
- Docker
- 로그인
- 회고록
- vue login
- vue
- react-query
- 신상마켓
- 배포
- AWS
Archives
- Today
- Total
강디너의 개발 일지
Vue - bundle size 분할하기 본문
728x90
문제점 : 한 파일의 용량이 커서 페이지가 늦게 뜨는 현상이 발생했다.
상황
1. About.vue 안에 header.vue, main.vue, 기타1 기타2 등등 들어있음.
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.js' 카테고리의 다른 글
| Vue - filters 기능 이용한 콤마 찍기 (0) | 2019.09.23 |
|---|---|
| Vue - watch를 이용한 정규식 사용 (0) | 2019.09.16 |
| Vue - Event Bus 사용법 (0) | 2019.08.19 |
| Vue에 익숙해지기 - Bingo(2) (0) | 2019.07.22 |
| Vue에 익숙해지기 - Bingo(1) (0) | 2019.06.27 |
'Javascript/Vue.js' Related Articles
more
Comments