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:
@@ -4,6 +4,9 @@ import Taro, { useDidShow } from '@tarojs/taro';
|
||||
import { z } from 'zod';
|
||||
import { createDailyMonitoring } from '@/services/health';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { useHealthStore } from '@/stores/health';
|
||||
import { usePointsStore } from '@/stores/points';
|
||||
import { clearRequestCache } from '@/services/request';
|
||||
import { trackEvent } from '@/services/analytics';
|
||||
import './index.scss';
|
||||
|
||||
@@ -217,6 +220,9 @@ export default function DailyMonitoring() {
|
||||
});
|
||||
|
||||
trackEvent('daily_monitoring_submit', { date: recordDate });
|
||||
useHealthStore.getState().clearCache();
|
||||
clearRequestCache('/health/');
|
||||
usePointsStore.getState().invalidate();
|
||||
Taro.showToast({ title: '上报成功', icon: 'success' });
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -3,12 +3,24 @@ import { View, Text, ScrollView } from '@tarojs/components';
|
||||
import Taro, { useDidShow } from '@tarojs/taro';
|
||||
import { useHealthStore } from '../../stores/health';
|
||||
import { listDailyMonitoring, DailyMonitoring } from '../../services/health';
|
||||
import { getCheckinStatus, CheckinStatus } from '../../services/points';
|
||||
import { usePointsStore } from '../../stores/points';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { trackEvent } from '../../services/analytics';
|
||||
import Loading from '../../components/Loading';
|
||||
import './index.scss';
|
||||
|
||||
const QUICK_ACTIONS = [
|
||||
{ label: '日常上报', char: '日', bg: 'icon-primary' },
|
||||
{ label: '体征录入', char: '录', bg: 'icon-accent' },
|
||||
{ label: '查看趋势', char: '势', bg: 'icon-warn' },
|
||||
];
|
||||
|
||||
const TREND_LINKS = [
|
||||
{ label: '血压趋势', indicator: 'blood_pressure_systolic', char: '压' },
|
||||
{ label: '心率趋势', indicator: 'heart_rate', char: '率' },
|
||||
{ label: '血糖趋势', indicator: 'blood_sugar_fasting', char: '糖' },
|
||||
];
|
||||
|
||||
function getStatusTag(status?: string) {
|
||||
if (status === 'high') return { label: '偏高', cls: 'tag-warn' };
|
||||
if (status === 'low') return { label: '偏低', cls: 'tag-warn' };
|
||||
@@ -39,23 +51,17 @@ function getBarPercent(value: number | undefined, ref?: string): number {
|
||||
|
||||
export default function Health() {
|
||||
const { todaySummary, loading, refreshToday } = useHealthStore();
|
||||
const { checkinStatus, refresh: refreshPoints } = usePointsStore();
|
||||
const { currentPatient } = useAuthStore();
|
||||
const [checkinStatus, setCheckinStatus] = useState<CheckinStatus | null>(null);
|
||||
const [recentRecords, setRecentRecords] = useState<DailyMonitoring[]>([]);
|
||||
|
||||
useDidShow(() => {
|
||||
refreshToday();
|
||||
loadExtraData();
|
||||
refreshPoints();
|
||||
loadRecentRecords();
|
||||
});
|
||||
|
||||
const loadExtraData = async () => {
|
||||
try {
|
||||
const status = await getCheckinStatus();
|
||||
setCheckinStatus(status);
|
||||
} catch {
|
||||
// points API 可能不可用
|
||||
}
|
||||
|
||||
const loadRecentRecords = async () => {
|
||||
if (currentPatient) {
|
||||
try {
|
||||
const resp = await listDailyMonitoring(currentPatient.id, { page: 1, page_size: 3 });
|
||||
@@ -91,16 +97,12 @@ export default function Health() {
|
||||
];
|
||||
|
||||
const quickActions = [
|
||||
{ label: '日常上报', char: '日', bg: 'icon-primary', action: goToDailyMonitoring },
|
||||
{ label: '体征录入', char: '录', bg: 'icon-accent', action: goToInput },
|
||||
{ label: '查看趋势', char: '势', bg: 'icon-warn', action: () => goToTrend('blood_pressure_systolic') },
|
||||
{ ...QUICK_ACTIONS[0], action: goToDailyMonitoring },
|
||||
{ ...QUICK_ACTIONS[1], action: goToInput },
|
||||
{ ...QUICK_ACTIONS[2], action: () => goToTrend('blood_pressure_systolic') },
|
||||
];
|
||||
|
||||
const trendLinks = [
|
||||
{ label: '血压趋势', indicator: 'blood_pressure_systolic', char: '压' },
|
||||
{ label: '心率趋势', indicator: 'heart_rate', char: '率' },
|
||||
{ label: '血糖趋势', indicator: 'blood_sugar_fasting', char: '糖' },
|
||||
];
|
||||
const trendLinks = TREND_LINKS;
|
||||
|
||||
const formatBp = (record: DailyMonitoring) => {
|
||||
const parts: string[] = [];
|
||||
|
||||
@@ -5,6 +5,8 @@ import { z } from 'zod';
|
||||
import { inputVitalSign } from '../../../services/health';
|
||||
import { useAuthStore } from '../../../stores/auth';
|
||||
import { useHealthStore } from '@/stores/health';
|
||||
import { usePointsStore } from '@/stores/points';
|
||||
import { clearRequestCache } from '@/services/request';
|
||||
import { trackEvent } from '@/services/analytics';
|
||||
import './index.scss';
|
||||
|
||||
@@ -88,6 +90,8 @@ export default function HealthInput() {
|
||||
note: note || undefined,
|
||||
});
|
||||
clearCache();
|
||||
clearRequestCache('/health/');
|
||||
usePointsStore.getState().invalidate();
|
||||
Taro.showToast({ title: '录入成功', icon: 'success' });
|
||||
trackEvent('health_data_input', { type: currentIndicator });
|
||||
setTimeout(() => Taro.navigateBack(), 1000);
|
||||
|
||||
Reference in New Issue
Block a user