模板中的动态导入

本节目标：理解“模板中的动态导入”的核心思路，并能把它用于实际开发或面试表达。是的，你可以在定义 tabPaneMap 时使用动态导入 (import())，这样做的好处包括按需加载组件和优化首屏加载性能。具体地说： 动态导入的写法 可以将 tabPaneMap 改为动态导入的方式，如下： const tabPaneMap = { real: () => import('./real.vue'), mock: () => import('./mock.vue'), archive: () => import('./archive.vue'), outside: () => import('./outside.vue'),} 在模板中，动态导入的组件会需要使用 defineAsyncComponent 来解析，例如： <template> <MTabs v-model:activeKey="state.activeKey" :tabs="tabs" ... > <template #[key] :key="key" v-for="{ key } in tabs"> <Suspense> <component :is="resolveComponent(key)" /> <template #fallback> <div>加载中...</div> </template> </Suspense> </template> </MTabs></template> <script setup lang="ts">import { reactive } from 'vue'import { Suspense, defineAsyncComponent } from 'vue' const tabPaneMap = { real: () => import('./real.vue'), mock: () => import('./mock.vue'), archive: () => import('./archive.vue'), outside: () => import('./outside.vue'),} const resolveComponent = (key: string) => defineAsyncComponent(tabPaneMap[key]) const tabs = [ { key: 'real', label: '真实' }, { key: 'mock', label: '模拟' }, { key: 'archive', label: '已归档' }, { key: 'outside', label: '外部账户' },] const state = reactive({ activeKey: 'real',})</script>

动态导入的优点

按需加载组件（Lazy Loading）：
- 使用动态导入时，组件的代码只有在被实际访问（如切换到对应的 tab）时才会加载。
- 如果某些组件内容复杂或依赖的代码量大，可以显著减小首屏加载的体积，提升用户体验。
优化性能：
- 组件的代码会被 Webpack 或 Vite 拆分成多个文件，形成独立的 JavaScript 异步模块。这种方式利用了浏览器的并行加载能力，提高资源加载效率。
减少首次加载时间：
- 如果组件较多且每个组件较大，通过动态导入，只加载当前使用的组件，避免所有组件一次性加载，减少初次渲染的阻塞。
代码分割（Code Splitting）：
- 动态导入能够自动触发代码分割，避免打包时把所有组件打到同一个 JavaScript 文件中。
- 每个动态导入的模块会生成独立的 chunk 文件，并且可以根据用户的实际使用按需加载。
用户体验：
- 对用户来说，首屏加载速度更快，切换 tab 时加载新组件可以显示加载状态（通过 Suspense 的 fallback 提供友好的提示）。

动态导入的潜在注意点

加载延迟：
- 动态导入需要发送额外的 HTTP 请求去加载相应的模块，所以初次加载某个组件时会有延迟。
- 解决方法是使用 Suspense 提供占位内容，如 “加载中...” 提示。
在开发环境中可能不直观：
- 在开发过程中，动态导入的模块可能会导致调试不直观，因为模块是在运行时加载的，而不是一开始就明确导入。
适用场景：
- 动态导入适合用于大型或不常用的模块。如果组件很小，动态导入的开销（如额外的 HTTP 请求）可能超过节省的成本。

适用场景 动态导入非常适合以下情况：

组件内容较多，且只会在特定条件下使用。
不同的 tab 对应的内容复杂，且有可能不会全部访问。
需要优化首屏性能，但允许在后台加载非关键内容。

如果页面中 tab 的数量较少且组件较小，可以继续使用静态导入，这样可以避免不必要的加载延迟。动态导入更适用于较多、较大组件的场景。 > 来自 <https://chatgpt.com/c/6781de87-f0e8-8004-9798-59cb331ee95a>

模板中的动态导入 ​

模板中的动态导入