异步组件依赖共享的核心是确保相同路径模块只加载执行一次，从而天然复用导出实例；需统一模块路径、避免动态导入、提取共享逻辑为同步模块，并在SSR中用工厂函数规避副作用污染。
异步组件实现依赖共享，核心在于避免重复加载同一模块、防止多次执行初始化逻辑（如状态创建、副作用注册），同时确保各组件能安全访问相同实例。关键不是“强行共享”，而是控制模块加载时机与导出方式，让多个异步组件自然复用同一份模块实例。
使用动态 import() + 单例缓存
直接 import() 每次调用都会触发新加载，但 JavaScript 模块系统本身具备缓存机制：同一路径的模块只执行一次，后续 import() 返回已缓存的 module 对象。因此，只要多个异步组件加载的是**完全相同的模块路径字符串**，就能天然共享依赖。
- ✅ 正确：所有组件都写
import('./sharedService.js')—— 路径一致，模块仅执行一次，导出对象被复用 - ❌ 错误：一个写
import('./sharedService.js')，另一个写import('./sharedService')（缺 .js）—— 路径不同，视为两个模块，各自执行 - ⚠️ 注意：Webpack/Vite 等构建工具默认支持模块缓存，但若路径含变量（如
import(`./${name}.js`)），则无法保证复用，应避免动态路径指向同一逻辑模块
将共享逻辑提前提取为同步模块
把需要共享的状态、工具函数、API 实例等，从异步组件中抽离到一个普通（同步）ES 模块中。异步组件按需加载自身 UI 部分，再导入该共享模块 —— 这样共享部分始终是单例，且不参与懒加载粒度控制。
- 例如：创建
shared/store.js导出一个createStore()或直接导出const store = new Store() - 所有异步组件（
ComponentA.vue、ComponentB.vue）在 setup 中import { store } from '@/shared/store'—— 共享实例被所有组件引用 - 优势：解耦清晰、调试方便、Tree-shaking 不受影响（共享模块可独立分析）
利用 defineAsyncComponent 的 loading 组件或 resolve 回调做预加载
Vue 的 defineAsyncComponent 支持传入工厂函数，可在加载前主动触发共享依赖的 import，确保其优先就绪。
- 在第一个异步组件定义时，提前执行
import('./sharedModule.js')（不 await，只触发加载） - 后续组件仍用正常
defineAsyncComponent(() => import('./MyComponent.vue'))，但内部逻辑依赖的 sharedModule 已在浏览器缓存中 - 更稳妥做法：封装一个预加载函数，在路由/应用启动时集中加载高频共享模块：
preloadSharedDeps().then(() => app.mount('#app'))
服务端渲染（SSR）场景下的注意事项
Node.js 环境下模块缓存行为与浏览器一致，但需注意：若共享模块含副作用（如全局事件监听、定时器），在 SSR 多请求并发时可能产生污染。
- 推荐共享模块导出工厂函数（如
createApiClient()），而非直接导出实例 - 异步组件中按需调用工厂函数，配合 Vue 的
onServerPrefetch或 Pinia 的 SSR 支持管理生命周期 - 避免在模块顶层直接执行有状态的操作（如
new Map()应放在函数内，而非模块作用域）
