perf(miniprogram): 全面性能优化 — 分包加载 + 请求缓存 + 渲染优化
Some checks failed
CI / rust-check (push) Has been cancelled
CI / rust-test (push) Has been cancelled
CI / frontend-build (push) Has been cancelled
CI / security-audit (push) Has been cancelled

分包加载(主包从 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:
iven
2026-04-28 11:44:37 +08:00
parent 1bece3d41f
commit fcfc0ba5d9
24 changed files with 268 additions and 192 deletions

View File

@@ -29,7 +29,7 @@ export interface EcCanvasRef {
setOption: (option: echarts.EChartsOption) => void;
}
const EcCanvas = forwardRef<EcCanvasRef, EcCanvasProps>(
const EcCanvas = React.memo(React.forwardRef<EcCanvasRef, EcCanvasProps>(
({ canvasId, height = 300 }, ref) => {
const chartInstance = useRef<echarts.ECharts | null>(null);
const canvasNode = useRef<any>(null);
@@ -91,7 +91,7 @@ const EcCanvas = forwardRef<EcCanvasRef, EcCanvasProps>(
</View>
);
},
);
));
EcCanvas.displayName = 'EcCanvas';

View File

@@ -10,7 +10,7 @@ interface EmptyStateProps {
onAction?: () => void;
}
export default function EmptyState({
export default React.memo(function EmptyState({
icon = '📭',
text,
hint,
@@ -29,4 +29,4 @@ export default function EmptyState({
)}
</View>
);
}
});

View File

@@ -7,7 +7,7 @@ interface ErrorStateProps {
onRetry?: () => void;
}
export default function ErrorState({
export default React.memo(function ErrorState({
text = '加载失败,请稍后重试',
onRetry,
}: ErrorStateProps) {
@@ -22,4 +22,4 @@ export default function ErrorState({
)}
</View>
);
}
});

View File

@@ -6,11 +6,11 @@ interface LoadingProps {
text?: string;
}
export default function Loading({ text = '加载中...' }: LoadingProps) {
export default React.memo(function Loading({ text = '加载中...' }: LoadingProps) {
return (
<View className='loading-state'>
<View className='loading-spinner' />
<Text className='loading-state-text'>{text}</Text>
</View>
);
}
});

View File

@@ -12,7 +12,7 @@ interface StepIndicatorProps {
onChange?: (index: number) => void;
}
export default function StepIndicator({ steps, current, onChange }: StepIndicatorProps) {
export default React.memo(function StepIndicator({ steps, current, onChange }: StepIndicatorProps) {
return (
<View className='step-indicator'>
{steps.map((step, idx) => {
@@ -39,4 +39,4 @@ export default function StepIndicator({ steps, current, onChange }: StepIndicato
})}
</View>
);
}
});

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useRef, useCallback, useState } from 'react';
import React, { useEffect, useRef, useCallback } from 'react';
import { View, Text } from '@tarojs/components';
import EcCanvas from '../EcCanvas';
import type { EcCanvasRef } from '../EcCanvas';
@@ -12,7 +12,7 @@ interface TrendChartProps {
height?: number;
}
export default function TrendChart({
export default React.memo(function TrendChart({
data,
referenceMin,
referenceMax,
@@ -20,7 +20,6 @@ export default function TrendChart({
height = 500,
}: TrendChartProps) {
const chartRef = useRef<EcCanvasRef>(null);
const [chartReady, setChartReady] = useState(false);
const getOption = useCallback(() => {
if (!data || data.length === 0) return null;
@@ -108,7 +107,6 @@ export default function TrendChart({
const option = getOption();
if (option) {
chartRef.current.setOption(option);
setChartReady(true);
}
}
}, [data, getOption]);
@@ -123,14 +121,7 @@ export default function TrendChart({
return (
<View className='trend-chart' style={{ height: `${height}rpx` }}>
{!chartReady && (
<View className='trend-chart-skeleton'>
<View className='skeleton-line skeleton-line-1' />
<View className='skeleton-line skeleton-line-2' />
<View className='skeleton-line skeleton-line-3' />
</View>
)}
<EcCanvas canvasId='trend-chart-canvas' ref={chartRef} height={height} />
</View>
);
}
});

View File

@@ -23,7 +23,7 @@ function getWeekDates(offset: number): string[] {
const WEEKDAYS = ['一', '二', '三', '四', '五', '六', '日'];
export default function WeekCalendar({ scheduledDates, selectedDate, onSelectDate }: WeekCalendarProps) {
export default React.memo(function WeekCalendar({ scheduledDates, selectedDate, onSelectDate }: WeekCalendarProps) {
const [weekOffset, setWeekOffset] = useState(0);
const dates = getWeekDates(weekOffset);
const today = (() => {
@@ -60,4 +60,4 @@ export default function WeekCalendar({ scheduledDates, selectedDate, onSelectDat
</View>
</View>
);
}
});