Vue 페이지 전환이 느린 경우 수행할 작업-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Vue 페이지 전환이 느린 경우 수행할 작업

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 24, 2023 am 11:56 AM

Vue를 사용하여 단일 페이지 애플리케이션(SPA)을 개발할 때 페이지 전환 속도는 사용자 경험의 핵심 요소 중 하나입니다. 페이지 전환이 너무 느리면 사용자가 애플리케이션을 원활하게 사용할 수 없어 애플리케이션의 사용성 및 사용자 만족도에 영향을 미칩니다. 따라서 Vue 페이지 전환 속도가 느린 경우 다음 조치를 취하여 최적화할 수 있습니다.

요청 시 라우팅 구성 요소 로드

Vue에서 vue-router는 일반적으로 페이지 간 경로 탐색을 구현하는 데 사용됩니다. 애플리케이션이 초기화되면 vue-router는 기본적으로 모든 라우팅 구성 요소를 한 번에 메모리에 로드합니다. 애플리케이션에 라우팅 구성 요소가 너무 많거나 일부 구성 요소가 매우 큰 경우 페이지 로딩 시간이 너무 길어져 페이지 전환 속도에 영향을 미칩니다.

이 문제를 해결하기 위해 온디맨드 로딩(Lazy Loading) 방식을 사용할 수 있습니다. 즉, 사용자가 경로에 액세스하면 해당 경로에 해당하는 구성 요소가 메모리에 로드됩니다. 이는 Vue의 비동기 구성요소를 통해 달성할 수 있습니다.

예를 들어 vue-router의 라우팅 구성에서 구성 요소 정의를 Promise 객체를 반환하는 비동기 함수로 변경할 수 있습니다. Promise가 해결되면 비동기 구성 요소가 로드되고 렌더링됩니다.

페이지가 로드된 후 브라우저는 CSS 스타일을 모든 요소에 적용해야 하며 이 과정에서 렌더링 차단이 발생할 수 있습니다. 일부 전역 CSS 스타일이 필요하지 않은 경우 해당 스타일을 제거하거나 간소화하는 것을 고려할 수 있습니다.

전역 CSS 스타일을 삭제하면 페이지 성능에 영향을 미칠 수 있으므로 주의해서 작업해야 한다는 점에 유의해야 합니다. 어떤 스타일이 불필요한지 확실하지 않은 경우 Chrome 개발자 도구의 성능 분석 도구를 사용하여 렌더링 타임라인을 보고 차단을 유발하는 CSS 스타일을 식별할 수 있습니다.

이미지 리소스는 웹 애플리케이션의 파일 형식 중 상당 부분을 차지하며 크기와 로딩 속도는 페이지 성능에 직접적인 영향을 미칩니다. 다음과 같은 방법으로 이미지 리소스를 최적화할 수 있습니다.

이미지 CDN 사용: 이미지 CDN(Content Delivery Network)을 사용하면 이미지 로딩 속도를 향상하고 서버 부하를 줄일 수 있습니다.
사진 형식 사용: 다양한 유형의 사진에 가장 적합한 사진 형식을 선택할 수 있습니다. 예를 들어 PNG 형식은 투명도가 높은 이미지에 적합하며, 이미지 품질이 보장되어야 하는 경우 JPEG 형식은 사진과 같은 대용량 이미지에 적합합니다.

Vue에서는 keep-alive 구성 요소를 사용하여 로드된 구성 요소 인스턴스를 캐시하여 페이지에 액세스할 때마다 다시 렌더링되는 것을 방지하여 페이지 로딩 속도를 향상시킬 수 있습니다. . 연결 유지 구성 요소는 포함 및 제외 필드를 설정하여 캐시에서 캐시하거나 제외해야 하는 구성 요소를 지정할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: () => import('./Home.vue')
    },
    // ...
  ]
})

로그인 후 복사

Keep-alive 구성 요소를 사용하여 페이지를 캐시할 때 더 많은 메모리를 차지하고 일부 상태 불일치를 유발하는 등의 부작용이 있을 수 있다는 점에 유의해야 합니다. 따라서 사용에는 신중한 고려와 신중한 테스트가 필요합니다.

Vue에서 각 구성 요소에는 수명 주기가 있으며 다양한 수명 주기는 다양한 작업에 해당합니다. 구성 요소의 비즈니스 로직이 너무 복잡하고 렌더링될 때마다 데이터를 다시 계산하고 구문 분석해야 하는 경우 페이지 성능에 큰 영향을 미칩니다.

페이지를 렌더링할 때 실행 오버헤드를 줄이기 위해 다음 방법을 사용할 수 있습니다.

불필요한 렌더링 방지: 구성 요소가 업데이트되면 이전 데이터와 새 데이터의 차이를 비교하여 구성 요소를 다시 렌더링할지 여부를 결정합니다.
Vuex를 적절하게 사용: Vuex를 사용하여 애플리케이션 상태를 관리하면 구성 요소 간의 데이터 통신 비용을 줄이고 불필요한 다시 렌더링을 피할 수 있습니다.

위의 방법 외에도 다음과 같은 최적화 전략을 시도해 볼 수도 있습니다.