perf: Major performance overhaul with virtual scrolling and context splitting

Phase 1 - Virtual Scrolling:
- Add @tanstack/react-virtual for efficient message list rendering
- Only render visible messages instead of entire history
- Fix auto-scroll using native scrollTop instead of unreliable virtualizer

Phase 2 - Context Optimization:
- Split monolithic SessionContext into 4 specialized contexts
- MessagesContext, SessionsContext, SettingsContext, UIContext
- Prevents unnecessary re-renders across unrelated components

Phase 3 - Compression & Cleanup:
- Enable Brotli compression (~23% smaller than gzip)
- Switch to fholzer/nginx-brotli:v1.28.0 image
- Add automatic upload cleanup for idle sessions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-20 17:28:03 +01:00
parent fbc8103034
commit e5d17bfad3
17 changed files with 827 additions and 564 deletions

View File

@@ -8,6 +8,7 @@
"name": "claude-web-ui-frontend",
"version": "1.0.0",
"dependencies": {
"@tanstack/react-virtual": "^3.10.9",
"lucide-react": "^0.294.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -1124,6 +1125,31 @@
"win32"
]
},
"node_modules/@tanstack/react-virtual": {
"version": "3.13.13",
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.13.tgz",
"integrity": "sha512-4o6oPMDvQv+9gMi8rE6gWmsOjtUZUYIJHv7EB+GblyYdi8U6OqLl8rhHWIUZSL1dUU2dPwTdTgybCKf9EjIrQg==",
"dependencies": {
"@tanstack/virtual-core": "3.13.13"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/@tanstack/virtual-core": {
"version": "3.13.13",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.13.tgz",
"integrity": "sha512-uQFoSdKKf5S8k51W5t7b2qpfkyIbdHMzAn+AMQvHPxKUPeo1SsGaA4JRISQT87jm28b7z8OEqPcg1IOZagQHcA==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",