vue code splitting 관련

spa형태의 웹사이트에서는 가장 치명적일 수 있는 것이 초기 로딩 속도 이다. SSR과 달리 CSR의 경우에 웹사이트의 모든 데이터 패키지를 초기에 다 내려받게 되므로, 초기 로딩 시간이 불필요하게 많이 걸리게 되면 손해이다. (모든 페이지를 다 돌아다닐 것이 아닌데 모든 페이지 관련 데이터를 받을 필요가 없다!)

 

============================================================================

알아야 할 문법적인 차이는 아래와 같다.

 

//일반적으로 component 혹은 모듈을 import 할 떄 다음과 같이 사용한다.

import Something from './Something.vue';

 

//code splitting을 할 때 사용할 문법

const Something = () => import(/* webpackChunkName: "Something" */ './Something.vue');

 

이렇게 함으로써 한 component가 로드될 때 무조건 해당 component나 모듈이 로드되는 것이 아니라 해당 component가 사용될 때 호출하기 위해 로드된다.

============================================================================

 

 

그래서 vue를 이용한 웹사이트 개발 시에도 code splitting 즉 코드 분할이 필요하다. 크게 3가지 방법이 있다.

 

1. routing 단위 코드 분할 : routing 되는 page를 한꺼번에 모두 초기에 불러오는 것이 아니라, 페이지를 이동할때 해당 코드 패키지를 불러오도록 분할하는 방법이다.

 

2. component도 페이징을 적용하여 활용 : 모든 component가 처음부터 다보여질 필요는 없다. 옵션적인 ui거나, 누구나 처음부터 다 필요한 정보가 아니라면, 사용자가 필요할때 열도록 하고 그때 해당 component에 관한 모듈을 로딩하는 방식이다.

 

3. 조건적인 ui는 처음부터 로딩할 필요 없음 : 2번과 비슷한 맥락으로 dialog나 팝업, 조건적으로 등장하는 ui단은 처음부터 무조건 로딩할 필요가 없다.

 

 

참고

https://medium.com/js-dojo/3-code-splitting-patterns-for-vuejs-and-webpack-b8fff1ea0ba4

 

3 Code Splitting Patterns For VueJS and Webpack