Vue.js Lazy load 적용하기1

모든 프로젝트가 마찬가지겠지만 시간에 쫓겨 코딩을 하다보면 금새 규모가 커지고 코드 복잡도가 올라가면서 코딩 스트레스가 가중되며 작은 변화가 예상치 못한 변화를 야기하는 상황이 많이 발생한다. 이 고비를 넘기지 못하면 자신의 코드에 대한 자신감이 줄어들고 아침에 일어나는게 악몽처럼 느껴지게된다.

이 악몽에서 나오기위해 최적화 작업을 해야할텐데, 그 방법중 Lazy load 는 필수적인 작업이라 할 수 있겠다. 아래 작업은 Vue cli 2를 사용하여 프로젝트를 빌드한 경우를 가정한 설명이다.

Lazy load

ReactJS, Vue.js 와 같은 프론트엔드 프레임워크의 기적인 속성은 사용자가 처음 진입할때 프로젝트와 관련된 모든 리소스를 한번에 다운받는다. 현재 보고 있는 화면과 무관한 것들까지 모두. 이때문에 프로젝트가 조금만 성숙해도 리소스의 양이 급증해서 리소스를 다운받는 시간이 늘어나게된다. Lazy load 는 리소스를 컴포넌트단위로 분리시켜주고, 컴포넌트 혹은 라우터 단위로 필요한 것들만 다운받을 수 있도록 한다.

물론 기본적으로 불필요한 리소스를 줄이거나, CDN을 적극 활용하는 다양한 방법이 필요하지만, Lazy load도 프론트엔드 프레임워크 프로젝트에서 필수적인 방법으로 자리잡았다.

Lazy load 적용전 빌드파일의 일부

위 그림은 Lazy load를 적용하기 전 빌드파일들이다. 위 파일들을 보면 vendor.js 파일일 볼 수 있는데 우리가 작성한 코드들과 라이브러리들이 모두 한 파일로 묶여있는 것이다. 무려 6M가 넘는다. 조금만 시간이 지나면 계속 증가할 것이다. 다른 리소스들까지 합하면 사용자가 감당해야할 용량이 더 증가한다.

Vue cli 를 사용해 빌드를 운영하고 있다면 간단히 적용할 수 있다. 라우터 설정에 필요한 컴포넌트를 아래와 같이 import 하면 자동으로 빌드시 webpackChunkName 이 설정되며 그 기준으로 리소스가 분리되어 빌드된다.

라우터 코드부분을 위와같이 작성하였다면, 빌드시 아래와 같은 파일들이 생성된 것을 볼 수 있다.

Lazy load 적용후 분리된 리소스들

vendor.js 는 2.09M 정도로 줄어들었고, 가장 오른쪽에 적혀있는 ChunkName 별로 리소스가 분리되어 있는것을 확인할 수 있다. 적절히 라우터별로 리소스가 분산되어 있는 프로젝트라면 큰 효과를 볼 수 있을것이다.

리소스 분산의 또 다른 장점은, 소스코드가 업데이트 되었을 경우다. 분산되어있지 않다면, 한줄의 코드가 변경되더라도 덩치큰 vendor.js 를 다시 다운받아야할테지만, 분산되어있다면 잘게 분산된 파일들 중 관련된 파일만 변경되어 다운받게된다.

다음 글 “[Vue.js] Lazy load 적용하기2

이 글이 마음에 드셨다면 👏🏽👏🏽, 커피한잔 후원하기 (카카오페이), 이메일 구독

Vue.js 관련 이야기들 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 https://bit.ly/3ax32Fn

Vue.js 관련 이야기들 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 https://bit.ly/3ax32Fn