이 글의 내용은 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
Eggheads에는 Vue 비동기 구성 요소를 사용하여 버튼을 구현하는 방법에 대한 정보가 있습니다. 로드해야 하는 구성 요소에 대한 설명입니다.
비동기 구성 요소를 구현하려면import
함수를 사용하여 구성 요소를 등록하기만 하면 됩니다. const store = new Vuex.Store() ... // 假设我们想加载'login'这个模块 import('./store/login').then(loginModule => { store.registerModule('login', loginModule) })
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!