본문 바로가기 메뉴 바로가기

beomy

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

beomy

검색하기 폼
  • 분류 전체보기 (93)
    • JavaScript (22)
    • React.JS (15)
    • Vue.JS (50)
    • ETC... (6)
  • 방명록

Lazy Loading Route (1)
[vue-router] Lazy Loading Routes

번들러를 사용하여 앱을 빌드할 때, JavaScript 번들이 커지게 되면 페이지 로드하는데 걸리는 시간이 길어지게 됩니다. 각각 라우트 컴포넌트 단위로 나누고 그 라우트에 방문하게 될 때 파일을 로드하는 것이 더 효율적입니다. 1. Vue의 비동기 컴포넌트 + Webpack의 코드 분할 Vue의 비동기 컴포넌트([Vue.JS] 컴포넌트 (고급:Dynamic & Async Components) 참고)와 Webpack의 코드 분할(Code Splitting 참고)을 결합하여 Lazy Loading Route를 쉽게 구현 할 수 있습니다. Vue의 비동기 컴포넌트 비동기 컴포넌트는 Promise를 반환하는 팩터리 함수를 이용하여 만들 수 있씁니다. 컴포넌트 정의는 resolve 함수의 인자로 전달 되어야 합..

Vue.JS 2019. 6. 19. 00:24
이전 1 다음
이전 다음
공지사항
최근에 올라온 글

Blog is powered by Tistory / Designed by Tistory

티스토리툴바