Webpack의 코드 분리를 사용하여 Vue 로딩을 구현하는 방법

이 글의 내용은 Webpack의 코드 분리를 사용하여 Vue 로딩을 구현하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Vue 프로젝트가 너무 커지면 Webpack의 코드 분리 기능을 사용하여 Vue 컴포넌트, 라우트를 분리하거나 Vuex 코드를 요청 시 로드하면 앱 첫 화면의 로딩 속도가 크게 향상됩니다. Vue Components，routes或Vuex的代码进行分离并按需加载，会极大的提高App的首屏加载速度。

在Vue的项目中，我们可以在三种不同的情况下使用懒加载和代码分离功能：

• Vue组件，也称为异步组件

• Vue-Router

• Vuex

三者的共同点都是使用的动态import，这在Webpack的第二个版本就开始被支持。

在Vue组件中进行懒加载

在Eggheads中有关于使用Vue异步组件实现按需加载组件的解释。

实现异步组件只需要使用import函数去注册组件即可：

Vue.component('AsyncCmp', () => import('./AsyncCmp'))

也可以使用本地注册组件的方式：

new Vue({
  // ...
  components: {
    'AsyncCmp': () => import('./AsyncCmp')
  }
})

使用箭头函数指向import函数，Vue将会在需要该组件的时候才执行请求加载该组件的代码。

如果导入的组件是使用命名的方式进行导出的，你可以在Promise的返回值中使用对象解构的方式实现按需加载组件。下面是加载KeenUI的 UiAlert组件的例子：

components: {
  UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}

在Vue router中进行懒加载

Vue router在原生支持懒加载。和懒加载组件的方式一样，都是使用import函数。例如我们想在/login这个路由下懒加载Login组件。

// 不再使用 import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

在Vuex中进行懒加载

Vuex的registerModule方法允许我们动态的创建Vuex的模块。如果我们使用import函数在Promise

Vue 프로젝트에서는 세 가지 상황에서 지연 로딩 및 코드 분리 기능을 사용할 수 있습니다.

Vue 비동기식 구성 요소라고도 하는 구성 요소

Vue-Router

Vuex

세 가지 공통점은 Webpack 두 번째 버전부터 지원되는 동적 가져오기를 사용한다는 것입니다.

Vue 구성 요소의 지연 로딩

Eggheads에는 Vue 비동기 구성 요소를 사용하여 버튼을 구현하는 방법에 대한 정보가 있습니다. 로드해야 하는 구성 요소에 대한 설명입니다.

비동기 구성 요소를 구현하려면 import 함수를 사용하여 구성 요소를 등록하기만 하면 됩니다.

const store = new Vuex.Store()

...

// 假设我们想加载'login'这个模块
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

로컬 등록 방법을 사용할 수도 있습니다 : #🎜🎜 #rrreee#🎜🎜#화살표 기능을 사용하여 import 함수를 가리키면 Vue는 컴포넌트가 로드될 때 컴포넌트 로드를 요청하는 코드를 실행합니다. 필요합니다. #🎜🎜##🎜🎜#가져온 구성 요소를 명명된 메서드를 사용하여 내보낸 경우 Promise의 반환 값에서 객체 구조 분해를 사용하여 요청 시 구성 요소를 로드할 수 있습니다. 다음은 KeenUI의 UiAlert 구성 요소를 로드하는 예입니다. #🎜🎜#rrreee#🎜🎜##🎜🎜##🎜🎜##🎜🎜#Lazy loading in Vue router#🎜🎜##🎜🎜##🎜🎜# Vue 라우터는 기본적으로 지연 로딩을 지원합니다. 구성 요소의 지연 로딩과 동일한 방식으로 import 기능이 사용됩니다. 예를 들어 /login 경로 아래에서 Login 구성 요소를 지연 로드하려고 합니다. #🎜🎜#rrreee#🎜🎜##🎜🎜##🎜🎜##🎜🎜#Vuex에서 지연 로딩#🎜🎜##🎜🎜##🎜🎜#Vuex의 registerModule 메소드를 사용하면 다음을 수행할 수 있습니다. Vuex 모듈을 동적으로 생성합니다. import 함수를 사용하여 Promise에서 모듈을 페이로드로 반환하면 지연 로딩이 달성됩니다. #🎜🎜#rrreee#🎜🎜##🎜🎜##🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜##🎜🎜#Lazy 로딩은 Vue + Webpack에서 매우 간단합니다. 위에서 배운 방법을 빠르게 사용하여 Vue 프로젝트의 코드를 분리하고 필요할 때 필요할 때 로드하면 애플리케이션의 첫 화면을 로드하는 시간을 크게 줄일 수 있습니다. #🎜🎜##🎜🎜#관련 권장 사항: #🎜🎜##🎜🎜##🎜🎜#시스템은 정리(수집)를 위해 일반적으로 사용되는 JS 방법을 요약합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜 #webpack4 반응으로 다중 페이지 애플리케이션을 구축하는 방법#🎜🎜##🎜🎜##🎜🎜##🎜🎜#

위 내용은 Webpack의 코드 분리를 사용하여 Vue 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!