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  
					
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb0c49-69a72.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb0c49-69a72.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?