제 3장 Lazy load routes

3. Lazy load routes

나만의 라우터 만들기 시리즈 의 4부 중 3부
알렉스 조버 모랄레스씀

Lazy Loading 및 Code Splitting은 PRPL 패턴 의 두 가지 주요 요점입니다. Google에서 명명한 패턴은 PWA(Progressive Web App)의 초기 로드를 최대한 빠르게 하여 성능을 향상시키는 일부 구조를 제공하기 위한 것입니다.

PRPL 패턴은 다음을 의미합니다.

• 초기 URL 경로에 대한 중요한 리소스를 푸시 합니다.
• 초기 경로를 렌더링 합니다.
• 나머지 경로를 미리 캐시합니다.
• 요청 시 나머지 경로를 지연 로드 하고 생성합니다.

사용자 참여는 사용자가 앱을 사용하는 만족도에 따라 달라지며 성능이 큰 부분을 차지합니다. 웹 성능을 다음과 같이 구분할 수 있습니다.

• 실제 성능 : 앱의 기능 동작 및 상태가 준비 상태가 되는 데 걸리는 시간을 설명합니다. Ajax 호출 시간 또는 앱 로딩 시간이 몇 가지 예입니다.
• 지각 성능 : 사용자가 앱의 이러한 동작과 상태를 얼마나 빠르고 부드럽게 인지하는지 설명합니다. 그것은 실제 성능 을 요약합니다. 즉, 실제 성능이 향상되면 지각된 성능도 함께 증가하지만 실제 성능을 높일 수 없는 경우에는 지각 성능을 높여 사용자 경험을 향상시킬 수 있습니다.
  Time to Interactive, Perceptual Speed Index 및 애니메이션이 몇 가지 예입니다.

경로에 대한 지연 로딩은 웹 앱의 사용자 경험을 향상시키는 중요한 도구인 실제 성능을 향상시킵니다.

라우터에서 지연 로딩 사용

구현하기가 어려울 수 있다고 생각할 수도 있지만… 이 라우터가 기본적으로 지연 로드된 route 와 이미 작동한다고 말하면 어떻게 될까요?

네, 맞습니다. Vue.js 템플릿의 렌더링 기능을 위한 컴파일 createElement는 약속을 반환하는 함수를 전달할 수 있는 매개변수로 함수 를 가져옵니다.
예는 다음과 같습니다.

render(createElement) {
  return createElement(() => Promise.resolve('<div>Hey boy</div>'))
}

그렇게 하면 동적 가져오기 를 사용하여 모듈을 페이로드로 사용하여 약속을 반환하기 때문에 구성 요소를 비동기적으로 로드하고 렌더링 할 수 있습니다.

<component>요소가 렌더링 함수로 컴파일 된다는 점을 감안할 때 AppRouter.vue 에서 정적 가져오기를 제거하고 대신 동적 가져오기를 사용할 수 있습니다.

// AppRouter.vue
const routes = {
  "/": () => import("./Home"),
  "/articles": () => import("./Articles")
};

그런 다음 브라우저의 devtools에서 네트워크 탭을 열면 다음 버튼을 누를 때 로드되는 0.chunk.js 이름으로 별도의 청크가 생성되고 작동하는 것을 볼 수 있습니다.

로컬에서 시도해야 합니다. CodeSandbox 예제 에서 시도하면 네트워크 탭에 청크가 표시되지 않습니다.

마무리

이 지점에 도달했다면 Vue.js에 라우터를 직접 구축했다는 의미입니다!
모두 처음부터 기본 라우터를 만들기 시작했지만 이 라우터는 구성 요소 기반이고 HTML5 History API를 사용하며 지연 로드를 쉽게 사용할 수 있습니다!
어렵지 않았죠? Vue.js는 실제로 그것을 쉽게 만드는 데 도움이 됩니다.

지금은 라우터가 앱에 연결되어 있지만 100% 재사용 및 npm 패키지로 내보낼 수 있도록 Vue.js 플러그인으로 만드는 방법을 살펴보겠습니다.