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:
@@ -1,8 +1,9 @@
|
||||
import React, { useState, useCallback, useRef } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro, { useDidShow, useReachBottom, usePullDownRefresh } from '@tarojs/taro';
|
||||
import { getAccount, listMyTransactions } from '../../../services/points';
|
||||
import type { PointsAccount, PointsTransaction } from '../../../services/points';
|
||||
import { listMyTransactions } from '../../../services/points';
|
||||
import type { PointsTransaction } from '../../../services/points';
|
||||
import { usePointsStore } from '../../../stores/points';
|
||||
import EmptyState from '../../../components/EmptyState';
|
||||
import Loading from '../../../components/Loading';
|
||||
import './index.scss';
|
||||
@@ -14,7 +15,7 @@ const TYPE_TABS = [
|
||||
];
|
||||
|
||||
export default function PointsDetail() {
|
||||
const [account, setAccount] = useState<PointsAccount | null>(null);
|
||||
const { account, refresh: refreshPoints } = usePointsStore();
|
||||
const [transactions, setTransactions] = useState<PointsTransaction[]>([]);
|
||||
const [activeTab, setActiveTab] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
@@ -22,15 +23,6 @@ export default function PointsDetail() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const loadingRef = useRef(false);
|
||||
|
||||
const fetchAccount = useCallback(async () => {
|
||||
try {
|
||||
const acct = await getAccount();
|
||||
setAccount(acct);
|
||||
} catch {
|
||||
// 账户可能尚未创建
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchTransactions = useCallback(
|
||||
async (pageNum: number, type: string, isRefresh = false) => {
|
||||
if (loadingRef.current) return;
|
||||
@@ -65,9 +57,9 @@ export default function PointsDetail() {
|
||||
const loadAll = useCallback(
|
||||
async (type?: string) => {
|
||||
const t = type !== undefined ? type : activeTab;
|
||||
await Promise.all([fetchAccount(), fetchTransactions(1, t, true)]);
|
||||
await Promise.all([refreshPoints(), fetchTransactions(1, t, true)]);
|
||||
},
|
||||
[fetchAccount, fetchTransactions, activeTab],
|
||||
[refreshPoints, fetchTransactions, activeTab],
|
||||
);
|
||||
|
||||
useDidShow(() => {
|
||||
|
||||
@@ -2,11 +2,11 @@ import React, { useState, useCallback } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro, { useDidShow } from '@tarojs/taro';
|
||||
import {
|
||||
getAccount,
|
||||
listProducts,
|
||||
exchangeProduct,
|
||||
} from '../../../services/points';
|
||||
import type { PointsAccount, PointsProduct } from '../../../services/points';
|
||||
import type { PointsProduct } from '../../../services/points';
|
||||
import { usePointsStore } from '../../../stores/points';
|
||||
import Loading from '../../../components/Loading';
|
||||
import './index.scss';
|
||||
|
||||
@@ -30,7 +30,7 @@ const TYPE_COLOR: Record<string, string> = {
|
||||
|
||||
export default function ExchangeConfirm() {
|
||||
const [product, setProduct] = useState<PointsProduct | null>(null);
|
||||
const [account, setAccount] = useState<PointsAccount | null>(null);
|
||||
const { account, refresh: refreshPoints } = usePointsStore();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
@@ -50,9 +50,9 @@ export default function ExchangeConfirm() {
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const [productRes, accountRes] = await Promise.all([
|
||||
const [productRes] = await Promise.all([
|
||||
listProducts({ page: 1, page_size: 100 }),
|
||||
getAccount(),
|
||||
refreshPoints(),
|
||||
]);
|
||||
const found = productRes.data.find((p) => p.id === productId);
|
||||
if (!found) {
|
||||
@@ -61,14 +61,13 @@ export default function ExchangeConfirm() {
|
||||
return;
|
||||
}
|
||||
setProduct(found);
|
||||
setAccount(accountRes);
|
||||
} catch {
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' });
|
||||
setTimeout(() => Taro.navigateBack(), 1500);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [refreshPoints]);
|
||||
|
||||
const balance = account?.balance ?? 0;
|
||||
const cost = product?.points_cost ?? 0;
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
import React, { useState, useCallback, useRef } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro, { useDidShow, useReachBottom, usePullDownRefresh } from '@tarojs/taro';
|
||||
import {
|
||||
getAccount,
|
||||
dailyCheckin,
|
||||
getCheckinStatus,
|
||||
listProducts,
|
||||
} from '../../services/points';
|
||||
import type { PointsAccount, PointsProduct, CheckinStatus } from '../../services/points';
|
||||
import { listProducts } from '../../services/points';
|
||||
import type { PointsProduct } from '../../services/points';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { usePointsStore } from '../../stores/points';
|
||||
import Loading from '../../components/Loading';
|
||||
import './index.scss';
|
||||
|
||||
@@ -27,8 +23,7 @@ const TYPE_BG: Record<string, string> = {
|
||||
|
||||
export default function Mall() {
|
||||
const { currentPatient } = useAuthStore();
|
||||
const [account, setAccount] = useState<PointsAccount | null>(null);
|
||||
const [checkinStatus, setCheckinStatus] = useState<CheckinStatus | null>(null);
|
||||
const { account, checkinStatus, refresh: refreshPoints, doCheckin } = usePointsStore();
|
||||
const [products, setProducts] = useState<PointsProduct[]>([]);
|
||||
const [productType, setProductType] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
@@ -38,24 +33,6 @@ export default function Mall() {
|
||||
const [noProfile, setNoProfile] = useState(false);
|
||||
const loadingRef = useRef(false);
|
||||
|
||||
const fetchAccountAndCheckin = useCallback(async () => {
|
||||
if (!currentPatient) {
|
||||
setNoProfile(true);
|
||||
return;
|
||||
}
|
||||
setNoProfile(false);
|
||||
try {
|
||||
const [acct, status] = await Promise.all([
|
||||
getAccount(),
|
||||
getCheckinStatus(),
|
||||
]);
|
||||
setAccount(acct);
|
||||
setCheckinStatus(status);
|
||||
} catch {
|
||||
// 账户可能尚未创建
|
||||
}
|
||||
}, [currentPatient]);
|
||||
|
||||
const fetchProducts = useCallback(
|
||||
async (pageNum: number, type: string, isRefresh = false) => {
|
||||
if (loadingRef.current) return;
|
||||
@@ -88,9 +65,14 @@ export default function Mall() {
|
||||
const loadAll = useCallback(
|
||||
async (type?: string) => {
|
||||
const t = type !== undefined ? type : productType;
|
||||
await Promise.all([fetchAccountAndCheckin(), fetchProducts(1, t, true)]);
|
||||
if (!currentPatient) {
|
||||
setNoProfile(true);
|
||||
return;
|
||||
}
|
||||
setNoProfile(false);
|
||||
await Promise.all([refreshPoints(), fetchProducts(1, t, true)]);
|
||||
},
|
||||
[fetchAccountAndCheckin, fetchProducts, productType],
|
||||
[currentPatient, refreshPoints, fetchProducts, productType],
|
||||
);
|
||||
|
||||
useDidShow(() => {
|
||||
@@ -114,11 +96,10 @@ export default function Mall() {
|
||||
if (checkinLoading || checkinStatus?.checked_in_today) return;
|
||||
setCheckinLoading(true);
|
||||
try {
|
||||
const result = await dailyCheckin();
|
||||
setCheckinStatus(result);
|
||||
const acct = await getAccount();
|
||||
setAccount(acct);
|
||||
Taro.showToast({ title: '签到成功', icon: 'success', duration: 2000 });
|
||||
const ok = await doCheckin();
|
||||
if (ok) {
|
||||
Taro.showToast({ title: '签到成功', icon: 'success', duration: 2000 });
|
||||
}
|
||||
} catch (err) {
|
||||
Taro.showToast({
|
||||
title: err instanceof Error ? err.message : '签到失败',
|
||||
|
||||
Reference in New Issue
Block a user