perf(miniprogram): 全面性能优化 — 分包加载 + 请求缓存 + 渲染优化
分包加载(主包从 517KB 降至 275KB,-47%): - 将 27 个页面拆入 6 个分包(health/doctor/mall/profile/content/device) - vendors.js 从 192KB 降至 36KB(-81%) - echarts 514KB 仅在访问健康趋势页时按需加载 请求层优化: - GET 请求增加 in-flight 去重 + 60s TTL 响应缓存 - 新建 points store 集中管理积分/签到状态(消除 5 处重复调用) - health store todaySummary 增加 60s TTL - mutation 后自动失效缓存(health input/daily-monitoring) - logout 时清空请求缓存 渲染优化: - 7 个组件添加 React.memo(EcCanvas/TrendChart/Loading/EmptyState 等) - 修复 TrendChart setChartReady 导致的双重渲染 - 静态数组(quickServices/quickActions/trendLinks)提取到模块级 - restoreAuth 从页面级提升到 App 级别 - 文章列表图片添加 lazyLoad 构建优化: - prod 配置添加 terser(drop_console + drop_debugger) - crypto-js 从全量引入改为按需引入(AES + Utf8)
This commit is contained in:
@@ -2,6 +2,7 @@ import { create } from 'zustand';
|
||||
import Taro from '@tarojs/taro';
|
||||
import * as authApi from '@/services/auth';
|
||||
import { secureGet, secureSet, secureRemove } from '@/utils/secure-storage';
|
||||
import { clearRequestCache } from '@/services/request';
|
||||
|
||||
interface BindPhoneResp {
|
||||
access_token: string;
|
||||
@@ -129,6 +130,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
|
||||
},
|
||||
|
||||
logout: () => {
|
||||
clearRequestCache();
|
||||
secureRemove('access_token');
|
||||
secureRemove('refresh_token');
|
||||
secureRemove('user_data');
|
||||
|
||||
@@ -9,26 +9,33 @@ interface CachedTrend {
|
||||
|
||||
interface HealthState {
|
||||
todaySummary: healthApi.TodaySummary | null;
|
||||
todaySummaryFetchedAt: number;
|
||||
trendData: Record<string, CachedTrend>;
|
||||
loading: boolean;
|
||||
refreshToday: () => Promise<void>;
|
||||
refreshToday: (force?: boolean) => Promise<void>;
|
||||
getTrend: (indicator: string, range: string) => Promise<{ date: string; value: number }[]>;
|
||||
clearCache: () => void;
|
||||
}
|
||||
|
||||
const CACHE_TTL = 5 * 60 * 1000; // 5 分钟
|
||||
const CACHE_TTL = 5 * 60 * 1000;
|
||||
const TODAY_SUMMARY_TTL = 60_000;
|
||||
|
||||
export const useHealthStore = create<HealthState>((set, get) => ({
|
||||
todaySummary: null,
|
||||
todaySummaryFetchedAt: 0,
|
||||
trendData: {},
|
||||
loading: false,
|
||||
|
||||
refreshToday: async () => {
|
||||
refreshToday: async (force = false) => {
|
||||
const state = get();
|
||||
if (!force && state.todaySummary && Date.now() - state.todaySummaryFetchedAt < TODAY_SUMMARY_TTL) {
|
||||
return;
|
||||
}
|
||||
set({ loading: true });
|
||||
try {
|
||||
const patientId = Taro.getStorageSync('current_patient_id') || undefined;
|
||||
const data = await healthApi.getTodaySummary(patientId);
|
||||
set({ todaySummary: data, loading: false });
|
||||
set({ todaySummary: data, todaySummaryFetchedAt: Date.now(), loading: false });
|
||||
} catch {
|
||||
set({ loading: false });
|
||||
}
|
||||
@@ -51,5 +58,5 @@ export const useHealthStore = create<HealthState>((set, get) => ({
|
||||
}
|
||||
},
|
||||
|
||||
clearCache: () => set({ trendData: {}, todaySummary: null }),
|
||||
clearCache: () => set({ trendData: {}, todaySummary: null, todaySummaryFetchedAt: 0 }),
|
||||
}));
|
||||
|
||||
49
apps/miniprogram/src/stores/points.ts
Normal file
49
apps/miniprogram/src/stores/points.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { create } from 'zustand';
|
||||
import * as pointsApi from '@/services/points';
|
||||
|
||||
interface PointsState {
|
||||
account: pointsApi.PointsAccount | null;
|
||||
checkinStatus: pointsApi.CheckinStatus | null;
|
||||
loading: boolean;
|
||||
lastFetched: number;
|
||||
refresh: () => Promise<void>;
|
||||
invalidate: () => void;
|
||||
doCheckin: () => Promise<boolean>;
|
||||
}
|
||||
|
||||
const CACHE_TTL = 2 * 60 * 1000;
|
||||
|
||||
export const usePointsStore = create<PointsState>((set, get) => ({
|
||||
account: null,
|
||||
checkinStatus: null,
|
||||
loading: false,
|
||||
lastFetched: 0,
|
||||
|
||||
refresh: async () => {
|
||||
if (Date.now() - get().lastFetched < CACHE_TTL && get().account) return;
|
||||
set({ loading: true });
|
||||
try {
|
||||
const [account, checkinStatus] = await Promise.all([
|
||||
pointsApi.getAccount(),
|
||||
pointsApi.getCheckinStatus(),
|
||||
]);
|
||||
set({ account, checkinStatus, loading: false, lastFetched: Date.now() });
|
||||
} catch {
|
||||
set({ loading: false });
|
||||
}
|
||||
},
|
||||
|
||||
invalidate: () => set({ lastFetched: 0 }),
|
||||
|
||||
doCheckin: async () => {
|
||||
try {
|
||||
const result = await pointsApi.dailyCheckin();
|
||||
set({ checkinStatus: result, lastFetched: 0 });
|
||||
const account = await pointsApi.getAccount();
|
||||
set({ account });
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
}));
|
||||
Reference in New Issue
Block a user