feat: PostHog 加载策略优化计划

目标

     改进 PostHog 延迟加载策略,平衡首屏性能和数据完整性:
     1. 使用 requestIdleCallback 替代固定 2 秒延迟
     2. 保留关键事件(first_visit)的同步追踪,确保数据不丢失
This commit is contained in:
zdl
2025-11-26 13:41:09 +08:00
parent 9c532b5f18
commit 6bd09b797d

View File

@@ -100,10 +100,9 @@ function AppContent() {
const pageEnterTimeRef = useRef(Date.now());
const currentPathRef = useRef(location.pathname);
// 🎯 ⚡ PostHog 延迟加载 + Redux 初始化(首屏不加载 ~180KB
// 🎯 ⚡ PostHog 空闲时加载 + Redux 初始化(首屏不加载 ~180KB
useEffect(() => {
// ⚡ 延迟 2 秒加载 PostHog 模块,确保首屏渲染不被阻塞
const timer = setTimeout(async () => {
const initPostHogRedux = async () => {
try {
const modules = await loadPostHogModules();
if (!modules) return;
@@ -115,13 +114,21 @@ function AppContent() {
// 初始化 PostHog
dispatch(posthogSliceModule.initializePostHog());
logger.info('App', 'PostHog 模块延迟加载完成Redux 初始化已触发');
logger.info('App', 'PostHog 模块空闲时加载完成Redux 初始化已触发');
} catch (error) {
logger.error('App', 'PostHog 延迟加载失败', error);
logger.error('App', 'PostHog 加载失败', error);
}
}, 2000);
};
return () => clearTimeout(timer);
// ⚡ 使用 requestIdleCallback 在浏览器空闲时加载,最长等待 3 秒
if ('requestIdleCallback' in window) {
const idleId = requestIdleCallback(initPostHogRedux, { timeout: 3000 });
return () => cancelIdleCallback(idleId);
} else {
// 降级Safari 等不支持 requestIdleCallback 的浏览器使用 setTimeout
const timer = setTimeout(initPostHogRedux, 1000);
return () => clearTimeout(timer);
}
}, [dispatch]);
// ⚡ 性能监控:标记 React 初始化完成
@@ -150,22 +157,31 @@ function AppContent() {
};
}, [dispatch]);
// ✅ 首次访问追踪
// ✅ 首次访问追踪(🔴 关键事件:立即加载模块,确保数据不丢失)
useEffect(() => {
const hasVisited = localStorage.getItem('has_visited');
if (!hasVisited) {
const urlParams = new URLSearchParams(location.search);
// ⚡ 使用延迟加载的异步追踪,不阻塞页面渲染
trackEventLazy('first_visit', {
const eventData = {
referrer: document.referrer || 'direct',
utm_source: urlParams.get('utm_source'),
utm_medium: urlParams.get('utm_medium'),
utm_campaign: urlParams.get('utm_campaign'),
landing_page: location.pathname,
timestamp: new Date().toISOString()
});
};
// 🔴 关键事件:立即加载 PostHog 模块并同步追踪(不使用 trackEventLazy
// 确保首次访问数据不会因用户快速离开而丢失
(async () => {
const modules = await loadPostHogModules();
if (modules) {
// 使用同步追踪trackEvent而非异步追踪trackEventAsync
modules.posthogModule.trackEvent('first_visit', eventData);
logger.info('App', '首次访问事件已同步追踪', eventData);
}
})();
localStorage.setItem('has_visited', 'true');
}