How does vue implement on-demand loading of business components?

problem description

at present, a module is to be implemented, and different business components are rendered within the module according to different scenarios, so the function of this module component is similar to that of distribution.
so I need to first use import to bring in all the components that might appear in the scene, and then locate them in the components object, does that mean that I have brought them all in, whether I use them or not?

for example, in the case of Hello and World , only one is used, but both are introduced

whether they are used or not.

related codes

//  .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>

expected results

so I want to achieve: only if I really use it, will I introduce that business component. I don"t have a clue at the moment. Is there a big god to show me the way?

Jan.08,2022

just change it to the following, you can open the console to try.

  render  
					
Menu