Webpack Dynamic 주석으로 Vue의 게으른로드 경로

JavaScript 라우팅 메커니즘은 일반적으로 어떤 상대 URL 패턴이 어떤 구성 요소 렌더링에 해당하는지 지정합니다. 예를 들어, /about Path를 렌더링해야합니다<about></about> 구성 요소. 이 기사에서는 Vue/Vue 라우터의 게으른 하중으로이를 달성하는 방법을 설명하고 가능한 한 간결하게 수행합니다.

이 기사를 모두 포함하는 코드 저장소는 Github에서 제공됩니다.

Vue 경로 (URL)를 보았을 수 있습니다.

 'vue'에서 Vue 가져 오기
'vue-router'에서 vuerouter 가져 오기

'../views/home.vue'에서 집으로 가져 오기
'../views/about.vue'에서 가져 오기
'../views/login.vue'에서 로그인 가져 오기

vue.use (vuerouter)

const 경로 = [
  {Path : '/', 이름 : '홈', 구성 요소 : 홈},
  {path : '/about', name : 'about', component : about},
  {Path : '/Login', 이름 : '로그인', 구성 요소 : 로그인}}
]]

Const Router = New Vuerouter ({{
  경로
})

기본 라우터 내보내기

이 코드는 / 경로로로드됩니다<home></home> 구성 요소,로드 /about 경로<about></about> 구성 요소, /login 경로로드<login></login> 구성 요소.

그러나이 코드 세분화 방법은 필요에 따라 동적으로로드하는 대신 함께 패키지 되므로이 코드 분할 방법은 잘 수행되지 않습니다.

다음은 코드 세분화를 위해 동적 가져 오기 문 및 웹 팩 청크 이름을 사용하는 개선 사항입니다.

 const 경로 = [
  {
    길: '/',
    이름 : '홈',
    구성 요소 : () => import (/ * WebPackChunkName : "home" */'../views/home.vue')
  },
  {
    경로 : '/about',
    이름 : '정보',
    구성 요소 : () => import (/ * WebPackChunkName : "About" */'../views/about.vue')
  },
  {
    경로 : '/로그인',
    이름 : '로그인',
    구성 요소 : () => import (/ * WebPackChunkName : "로그인" */'../Views/Login.Vue')
  }
]]

이 접근법은 명백한 단점없이 약간 길고 반복적입니다. 훌륭한 개발자로서, 그것을 개선하고, 배열을 사용하고 .map 작업을 수행하기 위해 약간의 추상화를합시다.

 const routeoptions = [
  {Path : '/', 이름 : 'home'},
  {path : '/about', name : 'about'},
  {Path : '/Login', 이름 : '로그인'}
]]

const lours = routeoptions.map (route => {
  반품 {
    ...노선,
    구성 요소 : () => 가져 오기 (`@/views/$ {route.name} .Vue`)
  }
})

Const Router = New Vuerouter ({{
  경로
})

이제 component 요소 키 사용을 줄이고 대신 경로 이름을 가져 오기 기능의 인수로 사용했습니다.

그러나 청크 이름을 설정하고 싶다면 어떻게해야합니까?

내가 알 수있는 한, 당신은 어떤 종류의 빌드 단계 없이는 JavaScript에서 동적 주석을 사용할 수 없습니다. 따라서이 경우 코드 쓰기의 양을 줄이기 위해 의견 (WebPackChunkName)을 희생합니다. 그것은 당신이 선호하는 방법에 따라 다릅니다.

농담,이 문제를 해결합시다.

Webpack 2.6.0에서 시작하여 자리 표시 자 [index] 및 [request] 이 지원되므로 다음과 같이 생성 된 청크의 이름을 설정할 수 있습니다.

 // ...

const routeoptions = [
  {Path : '/', 이름 : 'home'},
  {path : '/about', name : 'about'},
  {Path : '/Login', 이름 : '로그인'}
]]

const lours = routeoptions.map (route => {
  반품 {
    ...노선,
    구성 요소 : () => import (/ * WebPackChunkName : "[request]" */`../ views/$ {route.name} .Vue`)
  }
})

Const Router = New Vuerouter ({{
  경로
})

매우 좋은! 이제 우리는 이름이 지정된 chunk가있는 동적 로딩 경로뿐만 아니라 모든 기능을 가지고 있습니다. VUE 2 및 VUE 3에서 작동합니다. 터미널에서 npm run build 실행하여 확인할 수 있습니다.

그러나 게으른 부하 경로를 개별 구성 요소 대신 이름 지정된 청크로 그룹화하여 한 걸음 더 나아갈 수 있습니다. 예를 들어, 가장 중요한 구성 요소를 구성하는 일부 그룹과 다른 "덜 중요한"그룹에서 나머지 그룹을 만들 수 있습니다. 이전에 사용한 [request] 자리 표시자를 교체하려면 webpackChunkName 업데이트하면됩니다.

 const 경로 = [
  {
    길: "/",
    이름 : "홈",
    구성 요소 : () =>
      import (/ * WebPackChunkName : "verymportantthings" */"../views/home.vue")
  },
  {
    경로 : "/about",
    이름 : "정보",
    구성 요소 : () =>
      import (/ * WebPackChunkName : "verymportantthings" */"../views/about.vue")
  },
  {
    경로 : "/로그인",
    이름 : "로그인",
    구성 요소 : () =>
      import (/ * WebPackChunkName : "SOUMUMPERNANT" */"../Views/Login.Vue"))
  },
  {
    경로 : "/contact",
    이름 : "연락처",
    구성 요소 : () =>
      import (/ * WebPackChunkName : "soimportant" */"../views/contact.vue"))
  }
];

이제 우리의 4 가지 구성 요소는 두 개의 별도 덩어리로 그룹화됩니다.

그게 다야! VUE의 게으른 로딩 경로를위한 기술과 빌드 시간에 이름을 지정하고 그룹화하는 방법에 대한 제안.

위 내용은 Webpack Dynamic 주석으로 Vue의 게으른로드 경로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!