vue 如何实现业务组件的按需加载？

Question

问题描述

目前要实现一个模块，模块内部根据场景的不同渲染不同的业务组件，所以这个模块组件的作用是一个类似分发的功能。
所以我需要首先用 import 将所有场景下可能出现的组件都引入进来，然后定位在 components 对象中，是不是意味着不管我用没用到这些组件，已经把这些组件全部引入进来了？

比如下面的情况，Hello 和 World 只会用到一种，但不管有没有用到，两个都被引入进来了

相关代码

// 这是一个 .vue 文件，就是上面提到的模块（也是组件），内部根据不同场景渲染不同的组件<template>    <div>
        <Hello v-if="isHello" />
        <World v-else />
    </div></template><script>import Hello from './hello';import World from './world';export default {
    ...
    
    components: {Hello, World},
    
    ...
}
...</script>

期待的结果

所以想实现：只有我真正用到的情况下，才会引入那个业务组件，暂时没有什么头绪，有大神指条路吗？

Answer 1

问题描述目前要实现一个模块，模块内部根据场景的不同渲染不同的业务组件，所以这个模块组件的作用是一个类似分发的功能。所以我需要首先用&nbsp;import&nbsp;将所有场景下可能出现的组件都引入进来，然后定位在&nbsp;components&nbsp;对象中，是不是意味着不管我用没用到这些组件，已经把这些组件全部引入进来了？比如下面的情况，Hello&nbsp;和&nbsp;World&nbsp;只会用到一种，但不管有没有用到，两个都被引入进来了相关代码//&nbsp;这是一个&nbsp;.vue&nbsp;文件，就是上面提到的模块（也是组件），内部根据不同场景渲染不同的组件<template>&nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Hello&nbsp;v-if="isHello"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<World&nbsp;v-else&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;</div></template><script>import&nbsp;Hello&nbsp;from&nbsp;'./hello';import&nbsp;World&nbsp;from&nbsp;'./world';export&nbsp;default&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;components:&nbsp;{Hello,&nbsp;World}, &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;... } ...</script>期待的结果所以想实现：只有我真正用到的情况下，才会引入那个业务组件，暂时没有什么头绪，有大神指条路吗？