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>    <div>
        <Hello v-if="isHello" />
        <World v-else />
    </div></template><script>const Hello = () => import('./hello')const World = () => import('./world')export default {
    ...
    
    components: {Hello, World},
    
    ...
}
...</script>