104. router | 코드 스플리팅 소개 및 적용

vue.js는 싱글페이지 애플리케이션 이기 때문에 URL 변경되도 네트워크 패널에 아무런 변화가 없다.

일반적인 페이지는 이동 할 때 마다 서버로 가서 해당 HTML을 화면에 뿌리면서 페이지 전환이 일어나는데

싱글페이지 애플리케이션은 윈노우 히스토리를 이용해서 URL을 컨트롤러하고 URL에 따라서 Dom을 바꾸게 된다.

 

애플리케이션에 화면의 갯수가 많아지면 한번에 30개의 페이지를 로딩해 오면서 속도가 저하될 수 있다.

 

그럴때 처음 페이지는 로그인 페이지로 지정하고,

나머지 29개 페이지는 해당 URL로 이동햇을때 가져올수 있도록 하는게 코드 스플리팅이다.

 

싱글페이지 애플리케이션을 만들때 어떤 페이지를 코드 스플리팅 할지 고민하고 적용해서

페이지 로딩 속도를 줄이고 사용자 경험을 향상시키자.

import Vue from 'vue';
import VueRouter from 'vue-router';
// import LoginPage from '@/views/LoginPage.vue';
// import SignupPage from '@/views/SignupPage.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/login', // URL
      // component: LoginPage, // 이동할 컴포넌트명
      
      // 코드 스플리팅 문법 (이것 사용시 상단 import는 필요없음)
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      // component: SignupPage,
      component: () => import('@/views/SignupPage.vue'),
    },
  ],
});

---

 

코드 분할(Code Splitting)은 싱글 페이지 애플리케이션의 성능을 향상시키는 방법입니다.

싱글 페이지 애플리케이션(Single Page Application)은 초기 실행시에 필요한 웹 자원을 모두 다운 받는 특징이 있습니다.

코드 분할을 활용하게 되면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능 상의 이점이 생깁니다.

참고로 뷰에서 코드 분할이 가능한 이유는 뷰의 비동기 컴포넌트 로딩 (opens new window)과

웹팩의 코드 스플리팅 기술 (opens new window)덕택입니다.

 

https://joshua1988.github.io/vue-camp/advanced/code-splitting.html#%E1%84%80%E1%85%A2%E1%84%87%E1%85%A1%E1%86%AF-%E1%84%92%E1%85%AA%E1%86%AB%E1%84%80%E1%85%A7%E1%86%BC-%E1%84%8C%E1%85%A9%E1%84%80%E1%85%A5%E1%86%AB

Code Splitting | Cracking Vue.js