pref: P0: PostHog 延迟加载 - ✅ 完成
P0: HeroPanel 懒加载 - ✅ 完成 P0/P1: Charts/FullCalendar 懒加载 - ✅ 已通过路由懒加载隔离,无需额外处理 删除空的 CSS 文件
This commit is contained in:
84
src/App.js
84
src/App.js
@@ -27,19 +27,66 @@ import { PerformancePanel } from './components/PerformancePanel';
|
||||
import { useGlobalErrorHandler } from './hooks/useGlobalErrorHandler';
|
||||
|
||||
// Redux
|
||||
import { initializePostHog } from './store/slices/posthogSlice';
|
||||
// ⚡ PostHog 延迟加载:移除同步导入,首屏减少 ~180KB
|
||||
// import { initializePostHog } from './store/slices/posthogSlice';
|
||||
import { updateScreenSize } from './store/slices/deviceSlice';
|
||||
import { injectReducer } from './store';
|
||||
|
||||
// Utils
|
||||
import { logger } from './utils/logger';
|
||||
import { performanceMonitor } from './utils/performanceMonitor';
|
||||
|
||||
// PostHog 追踪
|
||||
import { trackEvent, trackEventAsync } from '@lib/posthog';
|
||||
// ⚡ PostHog 延迟加载:移除同步导入
|
||||
// import { trackEvent, trackEventAsync } from '@lib/posthog';
|
||||
|
||||
// Contexts
|
||||
import { useAuth } from '@contexts/AuthContext';
|
||||
|
||||
// ⚡ PostHog 延迟加载模块(动态导入后缓存)
|
||||
let posthogModule = null;
|
||||
let posthogSliceModule = null;
|
||||
|
||||
/**
|
||||
* ⚡ 延迟加载 PostHog 模块
|
||||
* 返回 { trackEvent, trackEventAsync, initializePostHog, posthogReducer }
|
||||
*/
|
||||
const loadPostHogModules = async () => {
|
||||
if (posthogModule && posthogSliceModule) {
|
||||
return { posthogModule, posthogSliceModule };
|
||||
}
|
||||
|
||||
try {
|
||||
const [posthog, posthogSlice] = await Promise.all([
|
||||
import('@lib/posthog'),
|
||||
import('./store/slices/posthogSlice'),
|
||||
]);
|
||||
|
||||
posthogModule = posthog;
|
||||
posthogSliceModule = posthogSlice;
|
||||
|
||||
return { posthogModule, posthogSliceModule };
|
||||
} catch (error) {
|
||||
logger.error('App', 'PostHog 模块加载失败', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* ⚡ 异步追踪事件(延迟加载 PostHog 后调用)
|
||||
* @param {string} eventName - 事件名称
|
||||
* @param {object} properties - 事件属性
|
||||
*/
|
||||
const trackEventLazy = async (eventName, properties = {}) => {
|
||||
// 等待模块加载完成
|
||||
if (!posthogModule) {
|
||||
const modules = await loadPostHogModules();
|
||||
if (!modules) return;
|
||||
}
|
||||
|
||||
// 使用异步追踪,不阻塞主线程
|
||||
posthogModule.trackEventAsync(eventName, properties);
|
||||
};
|
||||
|
||||
/**
|
||||
* AppContent - 应用核心内容
|
||||
* 负责 PostHog 初始化和渲染路由
|
||||
@@ -53,12 +100,25 @@ function AppContent() {
|
||||
const pageEnterTimeRef = useRef(Date.now());
|
||||
const currentPathRef = useRef(location.pathname);
|
||||
|
||||
// 🎯 PostHog Redux 初始化(延迟执行,不阻塞首屏)
|
||||
// 🎯 ⚡ PostHog 延迟加载 + Redux 初始化(首屏不加载 ~180KB)
|
||||
useEffect(() => {
|
||||
// ⚡ 延迟 2 秒初始化 PostHog,确保首屏渲染不被阻塞
|
||||
const timer = setTimeout(() => {
|
||||
dispatch(initializePostHog());
|
||||
logger.info('App', 'PostHog Redux 初始化已触发(延迟 2 秒)');
|
||||
// ⚡ 延迟 2 秒加载 PostHog 模块,确保首屏渲染不被阻塞
|
||||
const timer = setTimeout(async () => {
|
||||
try {
|
||||
const modules = await loadPostHogModules();
|
||||
if (!modules) return;
|
||||
|
||||
const { posthogSliceModule } = modules;
|
||||
|
||||
// 动态注入 PostHog reducer
|
||||
injectReducer('posthog', posthogSliceModule.default);
|
||||
|
||||
// 初始化 PostHog
|
||||
dispatch(posthogSliceModule.initializePostHog());
|
||||
logger.info('App', 'PostHog 模块延迟加载完成,Redux 初始化已触发');
|
||||
} catch (error) {
|
||||
logger.error('App', 'PostHog 延迟加载失败', error);
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
@@ -97,8 +157,8 @@ function AppContent() {
|
||||
if (!hasVisited) {
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
|
||||
// ⚡ 使用异步追踪,不阻塞页面渲染
|
||||
trackEventAsync('first_visit', {
|
||||
// ⚡ 使用延迟加载的异步追踪,不阻塞页面渲染
|
||||
trackEventLazy('first_visit', {
|
||||
referrer: document.referrer || 'direct',
|
||||
utm_source: urlParams.get('utm_source'),
|
||||
utm_medium: urlParams.get('utm_medium'),
|
||||
@@ -120,8 +180,8 @@ function AppContent() {
|
||||
|
||||
// 只追踪停留时间 > 1 秒的页面(过滤快速跳转)
|
||||
if (duration > 1) {
|
||||
// ⚡ 使用异步追踪,不阻塞页面切换
|
||||
trackEventAsync('page_view_duration', {
|
||||
// ⚡ 使用延迟加载的异步追踪,不阻塞页面切换
|
||||
trackEventLazy('page_view_duration', {
|
||||
path: currentPathRef.current,
|
||||
duration_seconds: duration,
|
||||
is_authenticated: isAuthenticated,
|
||||
|
||||
Reference in New Issue
Block a user