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,7 +2,6 @@ import Taro from '@tarojs/taro';
|
||||
import { secureGet, secureSet, secureRemove } from '@/utils/secure-storage';
|
||||
|
||||
const BASE_URL = process.env.TARO_APP_API_URL || 'http://localhost:3000/api/v1';
|
||||
const IS_DEV = process.env.NODE_ENV !== 'production';
|
||||
|
||||
interface ApiResponse<T> {
|
||||
success: boolean;
|
||||
@@ -21,6 +20,7 @@ async function getHeaders(): Promise<Record<string, string>> {
|
||||
return headers;
|
||||
}
|
||||
|
||||
// --- Token refresh deduplication ---
|
||||
let refreshPromise: Promise<boolean> | null = null;
|
||||
|
||||
async function tryRefreshToken(): Promise<boolean> {
|
||||
@@ -56,16 +56,11 @@ async function doRefresh(): Promise<boolean> {
|
||||
return false;
|
||||
}
|
||||
|
||||
export async function request<T>(method: string, path: string, data?: unknown): Promise<T> {
|
||||
// --- Core request ---
|
||||
async function request<T>(method: string, path: string, data?: unknown): Promise<T> {
|
||||
const headers = await getHeaders();
|
||||
const url = `${BASE_URL}${path}`;
|
||||
if (IS_DEV) {
|
||||
console.log(`[API] ${method} ${path}`);
|
||||
}
|
||||
const res = await Taro.request({ url, method: method as any, data, header: headers, timeout: 30000 });
|
||||
if (IS_DEV) {
|
||||
console.log(`[API] ${method} ${path} → ${res.statusCode}`);
|
||||
}
|
||||
const res = await Taro.request({ url, method: method as any, data, header: headers, timeout: 15000 });
|
||||
|
||||
if (res.statusCode === 401) {
|
||||
const refreshed = await tryRefreshToken();
|
||||
@@ -94,9 +89,56 @@ function buildQuery(params?: Record<string, string | number | undefined>): strin
|
||||
: '';
|
||||
}
|
||||
|
||||
// --- GET request cache + deduplication ---
|
||||
interface CacheEntry { data: unknown; expiry: number }
|
||||
const responseCache = new Map<string, CacheEntry>();
|
||||
const inflightRequests = new Map<string, Promise<unknown>>();
|
||||
const DEFAULT_CACHE_TTL = 60_000;
|
||||
|
||||
function getCacheKey(url: string): string {
|
||||
const patientId = Taro.getStorageSync('current_patient_id') || '';
|
||||
return `${url}#${patientId}`;
|
||||
}
|
||||
|
||||
export function clearRequestCache(prefix?: string): void {
|
||||
if (prefix) {
|
||||
for (const key of responseCache.keys()) {
|
||||
if (key.includes(prefix)) responseCache.delete(key);
|
||||
}
|
||||
} else {
|
||||
responseCache.clear();
|
||||
}
|
||||
}
|
||||
|
||||
export const api = {
|
||||
get: <T>(path: string, params?: Record<string, string | number | undefined>) =>
|
||||
request<T>('GET', `${path}${buildQuery(params)}`),
|
||||
get: <T>(path: string, params?: Record<string, string | number | undefined>, cacheTtl?: number): Promise<T> => {
|
||||
const url = `${path}${buildQuery(params)}`;
|
||||
const cacheKey = getCacheKey(url);
|
||||
|
||||
const cached = responseCache.get(cacheKey);
|
||||
if (cached && Date.now() < cached.expiry) {
|
||||
return Promise.resolve(cached.data as T);
|
||||
}
|
||||
|
||||
const inflight = inflightRequests.get(cacheKey);
|
||||
if (inflight) return inflight as Promise<T>;
|
||||
|
||||
const promise = request<T>('GET', url).then((data) => {
|
||||
inflightRequests.delete(cacheKey);
|
||||
const ttl = cacheTtl ?? DEFAULT_CACHE_TTL;
|
||||
if (ttl > 0) {
|
||||
responseCache.set(cacheKey, { data, expiry: Date.now() + ttl });
|
||||
}
|
||||
return data;
|
||||
}).catch((err) => {
|
||||
inflightRequests.delete(cacheKey);
|
||||
throw err;
|
||||
});
|
||||
|
||||
inflightRequests.set(cacheKey, promise);
|
||||
return promise;
|
||||
},
|
||||
|
||||
post: <T>(path: string, data?: unknown) => request<T>('POST', path, data),
|
||||
put: <T>(path: string, data?: unknown) => request<T>('PUT', path, data),
|
||||
delete: <T>(path: string) => request<T>('DELETE', path),
|
||||
|
||||
Reference in New Issue
Block a user