Vue 성능 최적화를 위한 비동기 구성 요소

Vue에서 구성 요소가 매우 큰 경우(예: 복잡한 형식) 전체 애플리케이션의 성능이 저하됩니다. 따라서 Vue 애플리케이션을 개발할 때 애플리케이션의 성능을 향상시키기 위해 필요에 따라 구성 요소를 로드하는 방법을 고려해야 합니다.

Vue는 비동기식 구성 요소의 기능을 제공하므로 구성 요소를 작은 조각으로 분할하고 필요할 때 동적으로 로드할 수 있습니다. 비동기 구성 요소의 작동 원리는 구성 요소가 렌더링되기 전에 먼저 구성 요소에 필요한 코드를 작은 블록으로 패키징한 다음 구성 요소를 사용해야 할 때 작은 블록을 동적으로 로드하는 것입니다.

1. 비동기식 구성 요소의 정의

Vue.js에서 비동기 컴포넌트를 정의하려면 webpack제공된 import()메소드를 사용해야 합니다. import()메소드를 사용하면 런타임에 코드를 동적으로 로드할 수 있습니다. 다음은 기본 비동기 구성 요소 정의입니다.

Vue.component('MyComponent', () => import('./MyComponent.vue'));

참고: 비동기 구성 요소의 정의는 객체를 반환하는 함수여야 합니다 Promise.

2. 비동기식 구성 요소 사용

비동기식 구성 요소를 사용할 때는 일반 구성 요소처럼 작성하기만 하면 됩니다. 구성 요소가 렌더링되면 Vue.js는 해당 구성 요소가 비동기 구성 요소임을 자동으로 감지하고 동적으로 로드합니다. 다음은 기본적인 비동기 구성 요소 사용법입니다.

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
export default {
  components: {
    MyComponent: () => import('./MyComponent.vue')
  }
}
</script>

3. 차단

애플리케이션에 여러 비동기 구성 요소가 포함되어 있는 경우 이를 서로 다른 작은 조각으로 패키징하여 애플리케이션 성능을 향상시킬 수 있습니다. Webpack에서는 webpackChunkName주석을 통해 비동기 모듈에 이름을 부여하여 단일 파일로 패키징할 수 있습니다. 예를 들어:

Vue.component('MyComponent', () => import(/* webpackChunkName: "my-component" */ './MyComponent.vue'));

4. 스켈레톤 화면

상대적으로 큰 일부 구성 요소의 경우 비동기식 구성 요소를 온디맨드 로드에 사용하더라도 구성 요소를 로드할 때 여전히 공백 기간이 있으므로 사용자에게 나쁜 경험을 선사합니다.

이때, 스켈레톤 스크린 기술을 이용하면, 로딩할 콘텐츠가 로딩 중임을 사용자에게 미리 알려주는 플레이스홀더(placeholder)를 렌더링할 수 있다. 다음은 기본적인 스켈레톤 화면 사용법입니다.

<template>
  <div>
    <template v-if="isLoading">
      <!-- 骨架屏代码 -->
    </template>
    <template v-else>
      <!-- 实际内容代码 -->
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    import('./MyComponent.vue').then(() => {
      this.isLoading = false
    })
  }
}
</script>

위 샘플 코드에서 isLoadingtrue일 경우 스켈레톤 화면의 코드가 출력되고, isLoadingfalse일 경우 실제 콘텐츠의 코드가 출력됩니다.

5. 주문형 로딩의 원리

Webpack에서 비동기 구성 요소의 주문형 로딩은 import()Webpack에서 제공하는 방법과 Code Splitting기능 에 의존합니다. 구성 요소가 비동기 구성 요소로 정의되면 Webpack은 해당 구성 요소를 개별적으로 파일로 패키징하고 메서드를 사용하여 import()런타임에 동적으로 로드합니다. webpack으로 패키징한 컴포넌트는 JavaScript 모듈식 파일이므로 트리 쉐이킹 메커니즘을 채택하고 CDN을 사용하여 가속하는 등 세부적인 최적화도 가능합니다.

요약하다

Vue 비동기 구성요소는 특히 대규모 단일 페이지 애플리케이션(SPA)의 경우 성능 최적화를 위한 매우 유용한 수단입니다. Webpack에서 비동기 구성요소와 스켈레톤 화면을 구성함으로써 애플리케이션의 성능과 사용자 경험을 크게 향상시킬 수 있습니다.