vue-router 지연 로딩은 로딩 속도를 최적화합니다.

이번에는 로딩 속도를 최적화하기 위한 vue-router 지연 로딩을 가져오겠습니다. 로딩 속도를 최적화하기 위한 vue-router 지연 로딩의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

지연 로딩: 지연 로딩이라고도 합니다. 즉, 필요할 때 로딩하고 필요할 때 로딩하는 것입니다.

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)
  }
 ]
})

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Linux에서 정규식 사용 팁

vue-infinite-loading으로 무한 로딩 효과 만들기

위 내용은 vue-router 지연 로딩은 로딩 속도를 최적화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!