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

비-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-routerroutinglazy loading

을 살펴보겠습니다. 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

HTML 태그의 JS 동적 작동

React Router v4 사용에 대한 자세한 설명

BubbleTransition이 페이지 전환 기능을 구현하는 방법

위 내용은 vue-router 지연 로딩의 느린 첫 번째 로딩 속도를 해결하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!