지연 로딩은 지연 로딩이라고도 하는데, 필요할 때 로딩하고 필요할 때 로딩하는 것을 의미합니다. 이 글에서는 주로 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
도 추가합니다. 일반 프로젝트에서는 라우터와 구성 요소 수준(또는 라우터 분할 사용)이면 충분합니다. 대규모 프로젝트에서는 이 세 가지를 모두 사용할 수도 있지만 사용법은 매우 간단합니다.
관련 권장 사항:
Js를 사용하여 지연 로딩 및 교차 도메인 구현을 구현하는 단계
JavaScript를 사용하여 이미지의 지연 로딩 방법 소개
위 내용은 Vue 코드 분할 및 지연 로딩 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!