vue-router 지연 로딩을 사용하여 처음 로드할 때 너무 많은 리소스로 인해 발생하는 느린 속도 문제를 해결하세요.

이 글에서는 처음 로딩할 때 너무 많은 리소스로 인해 발생하는 속도 저하 문제를 해결하기 위해 vue-router 지연 로딩을 주로 소개합니다. 이 글에서는 vue 라우터 라우팅 지연 로딩 문제를 별도로 소개하고 있으니 참고하시기 바랍니다

지연 로딩: 지연 로딩이라고도 하는데, 필요할 때 로딩하고 필요할 때 로딩하는 것을 의미합니다.

vue와 같은 단일 페이지 애플리케이션의 경우 애플리케이션 지연 로딩이 없으면 webpack으로 패키징된 파일이 비정상적으로 커져 홈페이지에 들어갈 때 로드할 내용이 너무 많아지고 시간도 너무 길어지게 됩니다. 로딩이 완료되어도 흰색 화면은 사용자 경험에 도움이 되지 않습니다. 지연 로딩을 사용하면 페이지를 분할하여 필요할 때 페이지를 로딩할 수 있어 홈페이지의 로딩 부담을 효과적으로 공유하고 로딩 시간을 줄일 수 있습니다. 홈페이지의.

간단히 말하면, 한 번에 너무 많은 리소스를 로드하지 않고 너무 오래 걸리지 않고 홈페이지에 입장할 수 있습니다! ! !

Lazy 로딩 방법:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//采用了懒加载
export default new Router({
 routes: [
  {
    path:'/',
    component:resolve => require(['@/components/index'],resolve)
  }
 ]
})

Non-lazy 로딩 방법:

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
 routes: [
  {
    path:'/',
    component:index
  }
 ]
})

ps: vue-router 라우팅 지연 로딩을 살펴보겠습니다

vue로 단일 페이지 애플리케이션을 작성할 때 .js, 패키지된 JavaScript 패키지는 매우 커서 페이지 로딩에 영향을 미칩니다. 이 문제를 최적화하기 위해 경로의 지연 로딩을 사용할 수 있으며, 이는 더 효율적이고 구현될 해당 구성 요소를 로드합니다.

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }
 ]
})

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련글 :

AJAX 단순 비동기 통신 예시 분석

서버에서 반환한 XML의 AJAX 처리 방법

AJAX 메커니즘과 크로스 도메인 통신에 대한 자세한 설명

위 내용은 vue-router 지연 로딩을 사용하여 처음 로드할 때 너무 많은 리소스로 인해 발생하는 느린 속도 문제를 해결하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!