如何根据用户选择的组件ID列表按需加载组件，减少内存浪费

以下方案默认适配Vue技术栈（你提到的:is为Vue动态组件专用指令），其他框架可参考核心逻辑迁移：

核心实现步骤 #

• 第一步：提前构建组件ID与异步导入函数的映射表，该映射表仅存储导入关系，不会提前触发组件加载，无额外内存占用

// 组件ID映射表，100+组件均可按该格式录入，不会提前加载
const componentMap = {
  7: () => import('./components/Comp7.vue'),
  22: () => import('./components/Comp22.vue'),
  50: () => import('./components/Comp50.vue'),
  // 剩余组件依次补充即可
}

• 第二步：根据用户选中的component_ids列表，仅动态加载对应ID的组件，存入响应式变量

import { shallowRef } from 'vue'
// 用shallowRef减少不必要的响应式开销，进一步节省内存
const activeComponents = shallowRef([])
// 示例选中ID
const component_ids = [7, 50, 22]

const loadSelected = async () => {
  const compList = await Promise.all(
    component_ids.map(async id => {
      const module = await componentMap[id]()
      // 绑定ID后续渲染用
      return { id, component: module.default }
    })
  )
  activeComponents.value = compList
}

// 页面初始化时触发加载
loadSelected()

• 第三步：模板层沿用你原本的:is动态组件用法即可，几乎无改造成本

<template>
  <div v-for="item in activeComponents" :key="item.id">
    <component :is="item.component" />
  </div>
</template>

可选优化项 #

• 可使用defineAsyncComponent封装异步加载逻辑，统一配置加载态、错误兜底、超时逻辑，提升用户体验

import { defineAsyncComponent } from 'vue'
const componentMap = {
  7: defineAsyncComponent({
    loader: () => import('./components/Comp7.vue'),
    loadingComponent: () => import('./components/CommonLoading.vue'),
    errorComponent: () => import('./components/LoadFailed.vue'),
    delay: 200, // 200ms内加载完成不展示加载态
    timeout: 3000 // 3s加载失败展示错误组件
  })
}

• 如果是Vue2环境，仅需将shallowRef替换为普通响应式变量，其余逻辑完全通用
• React技术栈可参考该逻辑，结合React.lazy与Suspense实现相同效果

内容的提问来源于stack exchange，提问作者Misster Hao