Zustand Bundle 优化：提升首屏加载速度的动态拆包策略

Zustand Bundle 优化提升首屏加载速度的动态拆包策略前言我是大山哥。上周帮客户优化状态管理时前端工程师小赵问我大山哥Zustand 虽然好用但首屏加载太慢了怎么优化我打开 Chrome DevTools 一看状态管理相关的代码打包后竟然有 50KB而且都是同步加载的。兄弟状态管理也要按需加载今天我就来分享如何通过动态拆包策略优化 Zustand 首屏加载速度。一、问题分析1.1 当前架构graph TD A[首屏加载] -- B[加载整个 store] B -- C[store.ts] C -- D[authStore] C -- E[userStore] C -- F[settingsStore] C -- G[cartStore] C -- H[notificationStore] C -- I[themeStore]1.2 问题量化Store 模块大小是否首屏必需authStore8KB✅ 必需userStore12KB✅ 必需settingsStore6KB❌ 非必需cartStore15KB❌ 非必需notificationStore5KB❌ 非必需themeStore4KB❌ 非必需合计50KB-二、动态拆包策略2.1 按需加载架构graph TD A[首屏加载] -- B[加载核心 store] B -- C[authStore] B -- D[userStore] E[用户访问购物车] -- F[动态加载 cartStore] G[用户打开设置] -- H[动态加载 settingsStore] I[用户触发通知] -- J[动态加载 notificationStore] K[用户切换主题] -- L[动态加载 themeStore]2.2 核心实现import { create } from zustand; interface AuthState { isLoggedIn: boolean; token: string | null; login: (token: string) void; logout: () void; } interface UserState { user: User | null; setUser: (user: User) void; clearUser: () void; } interface CartState { items: CartItem[]; addItem: (item: CartItem) void; removeItem: (id: string) void; clearCart: () void; } // 首屏必需的 store - 同步加载 export const useAuthStore createAuthState((set) ({ isLoggedIn: false, token: null, login: (token) set({ isLoggedIn: true, token }), logout: () set({ isLoggedIn: false, token: null }), })); export const useUserStore createUserState((set) ({ user: null, setUser: (user) set({ user }), clearUser: () set({ user: null }), })); // 非首屏必需的 store - 动态加载 let cartStore: ReturnTypetypeof createCartState | null null; export async function getCartStore(): PromiseReturnTypetypeof createCartState { if (cartStore) { return cartStore; } // 动态导入 store 实现 const { createCartStore } await import(./stores/cartStore); cartStore createCartStore(); return cartStore; } // Hook 封装 export function useCartStore() { throw new Error(useCartStore should be used with lazy loading); }2.3 动态 Store 实现// stores/cartStore.ts import { create } from zustand; import { persist } from zustand/middleware; interface CartItem { id: string; name: string; price: number; quantity: number; } interface CartState { items: CartItem[]; addItem: (item: CartItem) void; removeItem: (id: string) void; clearCart: () void; getItemCount: () number; getTotalPrice: () number; } export function createCartStore() { return createCartState()( persist( (set, get) ({ items: [], addItem: (item) set((state) ({ items: [...state.items, item], })), removeItem: (id) set((state) ({ items: state.items.filter((item) item.id ! id), })), clearCart: () set({ items: [] }), getItemCount: () get().items.reduce((sum, item) sum item.quantity, 0), getTotalPrice: () get().items.reduce((sum, item) sum item.price * item.quantity, 0), }), { name: cart-storage, } ) ); }三、React 组件集成3.1 懒加载 Hookimport { useState, useEffect, useCallback } from react; interface UseLazyStoreOptionsT { loader: () PromiseT; onLoad?: (store: T) void; onError?: (error: Error) void; } export function useLazyStoreT(options: UseLazyStoreOptionsT): { store: T | null; isLoading: boolean; error: Error | null; } { const [store, setStore] useStateT | null(null); const [isLoading, setIsLoading] useState(false); const [error, setError] useStateError | null(null); const loadStore useCallback(async () { setIsLoading(true); setError(null); try { const loadedStore await options.loader(); setStore(loadedStore); options.onLoad?.(loadedStore); } catch (err) { const error err instanceof Error ? err : new Error(String(err)); setError(error); options.onError?.(error); } finally { setIsLoading(false); } }, [options]); useEffect(() { loadStore(); }, [loadStore]); return { store, isLoading, error }; }3.2 组件使用示例import { useLazyStore