直接拆分状态管理模块能显著减少初始内存压力，关键在于按业务域（如营销、用户中心、系统配置）而非技术概念划分，并用独立状态实例、按需加载和生命周期清理来优化性能。
直接拆分状态管理模块，能显著减少初始加载时的内存压力。核心不是“要不要拆”，而是“按什么逻辑拆”和“拆到什么粒度”。
按业务域划分模块边界
避免按技术概念（如 user、order）粗暴切分，而应结合功能闭环和数据耦合度。比如：
- 营销模块：包含活动配置、邮件模板、发送记录，它们共享同一套权限和时间范围逻辑
- 用户中心：不单是 profile 数据，还应涵盖登录态、偏好设置、通知开关等强关联项
- 系统配置：把语言包、主题色、侧边栏展开状态等轻量但高频读取的配置归为一类，单独 proxy 或 store 模块
用独立状态实例替代全局大对象
不要把所有状态塞进一个 proxy 或 Vuex root state。Valtio、Zustand、Pinia 都支持创建多个隔离的状态实例：
- 每个模块导出自己的 useXXXStore 或 createXXXState，组件只引入所需模块
- 避免在模块间传递整个 state 对象，改用明确的 selector 函数提取字段（如 selectUserEmail）
- 对只读配置类状态（如 lang、serverConfig），可设为 readonly 或使用 shallow 包装，防止意外修改触发重渲染
控制模块加载时机
模块不是“定义即加载”，要配合路由或功能触发按需激活：
- Vue Router 中使用 defineAsyncComponent 加载页面组件时，同步动态导入对应 store 模块
- Zustand 支持 createStore 工厂函数，可在首次调用 hook 时才初始化状态，避免空模块占用内存
- Vuex 的模块可设为 dynamic: true，通过 store.registerModule 在需要时注册，用完后 unregisterModule
清理无用状态引用
拆分后仍需主动管理生命周期，否则模块多了反而更耗内存：
- 在组件卸载或路由离开时，清空该模块中缓存的列表数据（如 subscribers 列表设为空数组而非保留千条历史记录）
- 对定时轮询、WebSocket 订阅等副作用，确保与模块绑定——模块销毁时自动取消
- 避免在模块内长期持有 DOM 节点、Canvas 实例或大型 ArrayBuffer 引用
