목록성능최적화 (1)

송민준의 개발노트

Vue Lazy Loading

Lazy Loading이란? react, vue와 같은 SPA로 개발을 하면 사용자가 처음 진입 시 프로젝트와 관련된 모든 리소스를 다운 받는다. 그렇다면 현재 보여지는 화면 외에 다른 리소스까지 다운을 받게 되고 이는 프로젝트가 커질 수록 영향을 받게 된다. 이러한 문제를 개선하기 위한 방법이 Lazy Loading이다. 말 그대로 로딩을 지연한다는 것이다. 적용 방법은 간단하다. Vue Cli와 같은 도구를 사용하면 빌드 파일을 분리할 수가 있다. route를 설정하는 파일에서 특정 컴포넌트를 가져올 때 주석으로 webpackChunkName을 추가해주면 된다. 예를 들어 아래와 같이 변경이 가능하다. // 기존 import Notice from '@/views/board/Notice.vue' // ..
웹/Vue 2021. 7. 20. 10:31
이전 Prev 1 Next 다음