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:
@@ -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';
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user