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 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

React Router v4를 처음부터 사용하기

JS를 사용하여 HTML 태그를 동적으로 추가하는 방법

위 내용은 vue-router의 지연 로딩 중 처음으로 너무 많은 리소스가 로드되어 속도가 느려지는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!