docs(21-05): create summary and update state for code splitting & performance
Add 21-05-SUMMARY.md documenting route-based code splitting results (582 KB -> 454 KB main chunk + route-level chunks) and PlanTasksFetcher useEffect fix. Update STATE.md to plan 5/6 with new decisions.
This commit is contained in:
Lukas May
@@ -10,18 +10,18 @@ See: .planning/PROJECT.md (updated 2026-02-04)
|
||||
## Current Position
|
||||
|
||||
Phase: 21 of 21 (Polish & Integration) - In progress
|
||||
Plan: 4 of 6 in current phase
|
||||
Status: Completed 21-04 (Subscription Error Handling)
|
||||
Last activity: 2026-02-05 - Completed 21-04-PLAN.md (subscription error toasts)
|
||||
Plan: 5 of 6 in current phase
|
||||
Status: Completed 21-05 (Code Splitting & Data-Fetching Performance)
|
||||
Last activity: 2026-02-05 - Completed 21-05-PLAN.md (route code splitting + PlanTasksFetcher fix)
|
||||
|
||||
Progress: █████████░ 99%
|
||||
|
||||
## Performance Metrics
|
||||
|
||||
**Velocity:**
|
||||
- Total plans completed: 73
|
||||
- Total plans completed: 74
|
||||
- Average duration: 3 min
|
||||
- Total execution time: 206 min
|
||||
- Total execution time: 209 min
|
||||
|
||||
**By Phase (v1.0):**
|
||||
|
||||
@@ -247,6 +247,8 @@ Recent decisions affecting current work:
|
||||
- 21-04: duration: Infinity keeps error toast visible until user dismisses — persistent connection feedback
|
||||
- 21-04: No reconnection logic — tRPC SSE httpSubscriptionLink handles reconnection via EventSource retry
|
||||
- 21-04: SpawnArchitectDropdown already covered by 21-01 — verification task was no-op
|
||||
- 21-05: autoCodeSplitting: true on TanStackRouterVite plugin — automatic route splitting without manual .lazy.tsx files
|
||||
- 21-05: PlanTasksFetcher onTasks moved to useEffect to prevent setState-during-render loops
|
||||
|
||||
### Pending Todos
|
||||
|
||||
@@ -269,5 +271,5 @@ None.
|
||||
## Session Continuity
|
||||
|
||||
Last session: 2026-02-05
|
||||
Stopped at: Completed 21-04 (Subscription Error Handling)
|
||||
Stopped at: Completed 21-05 (Code Splitting & Data-Fetching Performance)
|
||||
Resume file: None
|
||||
|
||||
92
.planning/phases/21-polish-integration/21-05-SUMMARY.md
Normal file
92
.planning/phases/21-polish-integration/21-05-SUMMARY.md
Normal file
@@ -0,0 +1,92 @@
|
||||
---
|
||||
phase: 21-polish-integration
|
||||
plan: 05
|
||||
subsystem: ui
|
||||
tags: [vite, tanstack-router, code-splitting, performance, react]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 21-01
|
||||
provides: ErrorBoundary, toast infrastructure
|
||||
- phase: 21-02
|
||||
provides: Skeleton loading states
|
||||
- phase: 21-03
|
||||
provides: Navigation links, mobile responsive
|
||||
provides:
|
||||
- Route-based code splitting via TanStack Router autoCodeSplitting
|
||||
- PlanTasksFetcher render loop fix (setState-during-render eliminated)
|
||||
affects: [21-polish-integration]
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns: [autoCodeSplitting for route-level lazy loading]
|
||||
|
||||
key-files:
|
||||
modified:
|
||||
- packages/web/vite.config.ts
|
||||
- packages/web/src/routes/initiatives/$id.tsx
|
||||
|
||||
key-decisions:
|
||||
- "autoCodeSplitting: true on TanStackRouterVite plugin — automatic route splitting without manual .lazy.tsx files"
|
||||
- "PlanTasksFetcher onTasks moved to useEffect to prevent setState-during-render loops"
|
||||
|
||||
patterns-established:
|
||||
- "autoCodeSplitting handles route chunk boundaries automatically — no manual lazy route files needed"
|
||||
|
||||
# Metrics
|
||||
duration: 3min
|
||||
completed: 2026-02-05
|
||||
---
|
||||
|
||||
# Phase 21 Plan 05: Code Splitting & Data-Fetching Performance Summary
|
||||
|
||||
**Route-based code splitting and PlanTasksFetcher render loop optimization**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** 3 min
|
||||
- **Started:** 2026-02-05
|
||||
- **Completed:** 2026-02-05
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 2
|
||||
|
||||
## Accomplishments
|
||||
- Enabled `autoCodeSplitting: true` on TanStackRouterVite plugin, splitting monolithic 582 KB bundle into route-level chunks
|
||||
- Main vendor chunk reduced to 454 KB (below 500 KB warning threshold)
|
||||
- Route chunks: initiative detail (~13 KB), inbox (~13 KB), dashboard (~65 KB), dialog (~38 KB)
|
||||
- Fixed PlanTasksFetcher calling onTasks during render, moved to useEffect with proper dependency array
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Add route-based code splitting via TanStack Router lazy routes** - `1530d7a` (feat)
|
||||
2. **Task 2: Optimize PlanTasksFetcher render loop in initiative detail** - `c66d7ec` (fix)
|
||||
|
||||
## Files Created/Modified
|
||||
- `packages/web/vite.config.ts` - Added `autoCodeSplitting: true` to TanStackRouterVite plugin options
|
||||
- `packages/web/src/routes/initiatives/$id.tsx` - Moved onTasks callback from render body to useEffect in PlanTasksFetcher
|
||||
|
||||
## Decisions Made
|
||||
- Used `autoCodeSplitting: true` instead of manual `.lazy.tsx` file convention — the plugin handles splitting automatically
|
||||
- PlanTasksFetcher data flow changed from synchronous render-time callback to useEffect-based callback
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written. The `autoCodeSplitting` option was available in the installed version of @tanstack/router-plugin (^1.158.0), so manual .lazy.tsx splitting was not needed.
|
||||
|
||||
## Issues Encountered
|
||||
None
|
||||
|
||||
## User Setup Required
|
||||
None - no external service configuration required.
|
||||
|
||||
## Next Phase Readiness
|
||||
- Plan 21-05 complete, ready for 21-06
|
||||
- Bundle split into multiple route-level chunks
|
||||
- No setState-during-render warnings in PlanTasksFetcher
|
||||
|
||||
---
|
||||
*Phase: 21-polish-integration*
|
||||
*Completed: 2026-02-05*
|
||||
Reference in New Issue
Block a user