Vue.js에서 구성 요소의 비동기 로딩 구현 방법(코드)

이 글의 내용은 Vue.js에서 컴포넌트의 비동기 로딩 구현 방법(코드)에 관한 것입니다. 참고할 만한 가치가 있으니 참고하시면 도움이 될 것입니다.

프로젝트에 컴포넌트가 많을 때 webpack을 통해 패키징된 컴포넌트가 많다면, 해당 경로 중 하나에 해당하는 컴포넌트에 접근할 때 모든 컴포넌트의 파일을 로드하게 된다면 낭비가 클 것입니다. 성능 소모.
이 시점에서 컴포넌트 비동기 로딩을 사용해야 합니다. 즉, 해당 컴포넌트에 들어가면 핵심 컴포넌트, 코드 및 해당 컴포넌트 코드만 로드됩니다.
vue-router 및 webpack을 통해 달성
플러그인 지원 필요: babel-plugin-syntax-dynamic-import

import Vue from 'vue'import VueRouter from 'vue-router'
// 这里不在提前引入所有需要的组件，而是在路由配置项的component中按需引入即可
// import login from ('../components/login/login.vue')
// import homePagefrom ('../components/login/homePage.vue')
const homePage= () => {
    import('../components/home/homePage.vue')
}
Vue.use(VueRouter)const route = [
    {
            path: '/login',        
            name: "登陆",        
            // 当该路由被调用时，再去请求对应的组件内容        
            component: () => import('../components/login/login.vue')
    },
    {
            path: '/homePage/:id',        
            name: "首页",        
            // 当该路由被调用时，再去请求对应的组件内容        
            component: () => import('../components/home/homePage.vue')
    }
]export default () => {
    return new VueRouter ({
        route 
    })
}

관련 권장 사항:

JS 파일을 비동기적으로 로드하기 위한 비교적 간단한 코드_javascript 기술

in vue + webpack에서 비동기 구성 요소 로딩을 구현하는 방법은 무엇입니까?

위 내용은 Vue.js에서 구성 요소의 비동기 로딩 구현 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!