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

修改成如下即可，可以打开控制台试试。<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>const&nbsp;Hello&nbsp;=&nbsp;()&nbsp;=>&nbsp;import('./hello')const&nbsp;World&nbsp;=&nbsp;()&nbsp;=>&nbsp;import('./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>