집 > 기사 > 웹 프론트엔드 > Vue 코드 분할 및 지연 로딩 정보

Vue 코드 분할 및 지연 로딩 정보

小云云원래의: 2017-12-18 13:07:371877검색

지연 로딩은 지연 로딩이라고도 하는데, 필요할 때 로딩하고 필요할 때 로딩하는 것을 의미합니다. 이 글에서는 주로 Vue 코드 분할과 지연 로딩의 구현 방법을 소개합니다. 이 글에서는 예제 코드를 통해 이를 매우 자세하게 소개합니다. 이는 모든 사람의 학습이나 작업에 대한 특정 참조 학습 가치가 있으므로 학습할 수 있습니다. 함께 공부하세요. 그것이 모두에게 도움이 되기를 바랍니다.

Lazy Loading이 필요한 이유

단일 페이지 애플리케이션에서 해당 애플리케이션의 Lazy Loading이 없으면 webpack으로 패키징한 파일이 비정상적으로 커져서 홈페이지에 들어갈 때 너무 많은 내용이 로딩되게 되고, 지연 시간이 너무 길어서 작동하지 않을 수 있으며, 지연 로딩을 사용하면 필요할 때 페이지를 로드하면 홈페이지의 로딩 부담을 효과적으로 공유하고 로딩 시간을 줄일 수 있습니다. 홈페이지

웹팩과 협력하여 컴포넌트 지연 로딩을 구현하는 방법

1. 웹팩 구성 파일의 출력 경로에 ChunkFilename 속성을 구성합니다.

output: {
path: resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: 'chunk[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},

chunkFilename 경로는 컴포넌트 지연 로딩 경로로 사용됩니다

2. webpack에서 지원하는 비동기 로딩 방식에 협력

resolve => require([URL], resolve ), 좋은 지원
() => system.import(URL) 점진적으로 폐지될 예정이므로 권장하지 않는다고 명시되어 있습니다.
() => import(URL), webpack2 공식 홈페이지에서는 사용을 권장하며, es7 카테고리에 속하며, babel의 Syntax-dynamic과 함께 사용해야 합니다. -import 플러그인. 구체적인 사용 방법은 다음과 같습니다

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015

use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
}
}]

Introduction

webpack>2 시대에는 vue가 코드 분할을 수행하는 것이 더 쉽고, require.ensure가 필요합니다. 필요하지 않습니다.

수입이 모든 것을 해결합니다.

분할 수준

Vue 코드 분할 및 지연 로딩에는 다음 수준이 포함됩니다.

1. 구성 요소 수준 분할 및 지연 로딩

2. 라우터 라우팅 수준

3. Vuex 모듈

구성 요소 수준 code Split

//全局组件
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//局部注册组件
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent')
 }
})

// 如果不是default导出的模块
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
 }
})

라우팅 수준 코드 분할

const AsyncComponent= () => import('./AsyncComponent')

new VueRouter({
 routes: [
 { path: '/test', component: AsyncComponent}
 ]
})

Vuex 모듈 코드 분할, vuex에는 동적 등록 모듈 방법이 있고 import

const store = new Vuex.Store()

import('./store/test').then(testModule => {
 store.registerModule('test', testModule)
})

Summary

도 추가합니다. 일반 프로젝트에서는 라우터와 구성 요소 수준(또는 라우터 분할 사용)이면 충분합니다. 대규모 프로젝트에서는 이 세 가지를 모두 사용할 수도 있지만 사용법은 매우 간단합니다.

Vue 코드 분할 및 지연 로딩 정보

관련 기사