Vue.js中components与computed内动态导入组件的差异及正确方式

嘿，这两种实现动态组件懒加载的方式确实存在不少关键差异，我来给你拆解清楚，顺便说说它们各自的适用场景：

核心差异对比 #

第一种方式：预定义懒加载组件映射 #

<template> 
  <component :is="compName"> 
  </component>
</template> 
<script>
export default {
  data: () => ({compName: 'input'}), 
  components: { 
    input: () => import('/components/input'), 
    video: () => import('/components/video'), 
    audio: () => import('/components/audio'), 
    image: () => import('/components/image'), 
  }
}
</script>

• 打包行为：构建工具（比如Webpack/Vite）会明确识别到这四个import()调用，将每个组件单独打包成独立的chunk文件，只会打包你指定的这四个组件，没有冗余。
• 切换逻辑：components选项里提前注册了所有可选组件的懒加载函数，当你切换compName时，对应的懒加载函数已经存在，浏览器会立刻发起请求加载目标chunk（如果还没加载过的话）。
• 可读性与可控性：代码清晰直观，一眼就能看到所有可选的组件，维护起来更简单，适合组件数量固定、明确的场景。

第二种方式：动态计算导入路径 #

<template> 
  <component :is="loadComp"> 
  </component>
</template> 
<script>
export default {
  data: () => ({compName: 'input'}), 
  computed: { 
    loadComp () { 
      const compName = this.compName 
      return () => import(`/components/${compName}`) 
    }
  }
}
</script>

• 打包行为：构建工具会识别到这是一个动态路径模板，会把/components/目录下所有匹配该模板的文件都打包成独立chunk（比如如果目录下还有其他无关组件，也可能被误打包进去，具体取决于工具配置）。这种方式灵活性更高，但如果控制不好，容易出现不必要的打包冗余。
• 切换逻辑：每次compName变化时，计算属性loadComp会返回一个全新的懒加载函数，此时才会触发浏览器加载对应的组件chunk。
• 灵活性：适合组件数量不固定的场景，比如需要根据后端配置、用户输入动态加载不同组件的情况，但需要确保路径模板有足够的静态部分（不能完全动态，比如import(compName)就无法被构建工具正确解析）。

哪种是正确的方式？ #

其实两种都是合法且正确的动态组件懒加载方式，只是适用场景不同：

• 如果你的可选组件是固定的4个，优先选第一种方式，它更清晰、可控，不会出现额外的打包冗余，维护成本更低。
• 如果需要动态加载不确定数量的组件，或者组件列表需要动态生成，第二种方式更灵活，但要注意配置构建工具，避免打包无关文件。

另外补充个小细节：第二种方式中，因为loadComp是计算属性，每次compName变化都会返回新的import()函数，但浏览器会缓存已经加载过的chunk，所以即使频繁切换也不会重复加载相同组件，这点不用担心。

内容的提问来源于stack exchange，提问作者sudhakar selva