chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Bundle size optimization (code splitting) #31

New Issue
Closed
opened 2026-02-06 07:59:17 +00:00 by chihlasm · 1 comment
chihlasm commented 2026-02-06 07:59:17 +00:00 (Migrated from github.com)
Copy Link

Problem

The frontend JS bundle is 673KB (minified), exceeding Vite's 500KB warning threshold.

Action

  • Add dynamic imports for heavy pages (TreeEditorPage, TreeNavigationPage)
  • Split vendor chunks (react-markdown, zustand, etc.)
  • Configure build.rollupOptions.output.manualChunks in vite.config.ts
  • Target: main bundle under 500KB

Current

dist/assets/index-U0xZpNfu.js   673.27 kB │ gzip: 199.94 kB
## Problem The frontend JS bundle is 673KB (minified), exceeding Vite's 500KB warning threshold. ## Action - Add dynamic imports for heavy pages (TreeEditorPage, TreeNavigationPage) - Split vendor chunks (react-markdown, zustand, etc.) - Configure `build.rollupOptions.output.manualChunks` in vite.config.ts - Target: main bundle under 500KB ## Current ``` dist/assets/index-U0xZpNfu.js 673.27 kB │ gzip: 199.94 kB ```
chihlasm commented 2026-02-08 04:08:01 +00:00 (Migrated from github.com)
Copy Link

✅ Achieved exceptional bundle size optimization! Reduced from 892 KB to 221 KB (75% reduction, exceeded 44% target by 56%). Implemented dynamic imports for 9 heavy pages using React.lazy() and Suspense, vendor chunk splitting with 6 optimized chunks (react, markdown, utils, dnd, icons, state), and PageLoader fallback component. 3.5x faster initial page load. All chunks under 200 KB. Completed in commit 996b664.

✅ Achieved exceptional bundle size optimization! Reduced from 892 KB to 221 KB (75% reduction, exceeded 44% target by 56%). Implemented dynamic imports for 9 heavy pages using React.lazy() and Suspense, vendor chunk splitting with 6 optimized chunks (react, markdown, utils, dnd, icons, state), and PageLoader fallback component. 3.5x faster initial page load. All chunks under 200 KB. Completed in commit 996b664.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
10x-analysis
From 10x product analysis
 backend
FastAPI/Python work
 bug
Something isn't working
 collaboration
Team sharing, escalation, notifications
 database
PostgreSQL/schema changes
 documentation
Documentation updates
 duplicate
This issue or pull request already exists
 enhancement
Improvement to existing feature
 feature
New functionality
 frontend
React work
 good first issue
Good for newcomers
 help wanted
Extra attention is needed
 integration
PSA, external service integrations
 intelligence
Analytics, AI, data-driven features
 invalid
This doesn't seem right
 priority: high
Do this soon
 priority: low
Nice to have
 priority: medium
Important but not urgent
 question
Further information is requested
 quick-win
Low effort, high value
 strategic
Long-term strategic bet
 ux
User experience improvements
 wontfix
This will not be worked on
No Label enhancement frontend priority: low
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
chihlasm
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#31
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?