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 ファイルを非同期でロードするための比較的単純なコード_vue の javascript スキル

+ Webpack で非同期コンポーネントの読み込みを実装するにはどうすればよいですか?

以上がVue.jsでのコンポーネントの非同期読み込みの実装方法（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。