بنقرة واحدة
wsh-lazy-modal
// Lazy loading modal containers and route components to reduce initial bundle size — CrokContainer, NewPostModalContainer
// Lazy loading modal containers and route components to reduce initial bundle size — CrokContainer, NewPostModalContainer
Crok AI chat rendering optimization — SSE debouncing, ChatMessage memoization, Markdown re-render prevention
DM page and flow optimization — afterSave hook, message rendering, unread count queries for WSH 2026
Home page performance optimization — Post defaultScope, SSR data reduction, lazy media hydration for WSH 2026 CaX app
SSE streaming optimization — batching char-by-char events and debouncing React re-renders for Crok AI chat performance
Runs Visual Regression Testing (VRT) locally to prevent disqualification in Web Speed Hackathon. Captures screenshots, compares against baselines, updates snapshots, and validates visual integrity after performance optimizations. Use when optimizing WSH apps, running VRT checks, updating VRT baselines, or investigating VRT failures.
Optimizes deliberately slow web applications for maximum Lighthouse scores in Web Speed Hackathon (CyberAgent). Use when participating in WSH or performing aggressive frontend performance optimization on React/Node.js apps with SQLite backends. Covers bundle reduction, image optimization, Core Web Vitals, server tuning, and known competition traps.
| name | wsh-lazy-modal |
| description | Lazy loading modal containers and route components to reduce initial bundle size — CrokContainer, NewPostModalContainer |
Reducing initial bundle size by lazy-loading components that are not needed on first render.
Use this skill when eager imports of modals or route containers bloat the main JS bundle.
// Before: eager import includes all deps (react-markdown, syntax-highlighter, etc.)
import { CrokContainer } from "./CrokContainer";
// After: lazy import — chunk only loaded when /crok route is visited
const CrokContainer = React.lazy(() =>
import("./CrokContainer").then((m) => ({ default: m.CrokContainer }))
);
Modals rendered outside routes (e.g., NewPostModalContainer always mounted in AppContainer) need special handling:
// Option 1: React.lazy (simplest, works if wrapped in Suspense)
const NewPostModalContainer = React.lazy(() =>
import("./NewPostModalContainer").then((m) => ({ default: m.NewPostModalContainer }))
);
// In render: wrap with Suspense
<Suspense fallback={null}>
<NewPostModalContainer id={newPostModalId} />
</Suspense>
When using React.lazy with SSR (hydrateRoot), the lazy component must be resolvable during hydration. If the component is not rendered during SSR (modals are typically hidden), this is safe. The chunk will be loaded on-demand when the modal opens.
| Pitfall | Symptom | Fix |
|---|---|---|
| Named export mismatch | "Element type is invalid" error | Use .then(m => ({ default: m.NamedExport })) wrapper |
| Missing Suspense boundary | React error about missing Suspense | Wrap lazy component with <Suspense> |
| SSR hydration mismatch | Hydration warning in console | Ensure lazy components not rendered in SSR output |
| Change | Visual Impact | Mitigation |
|---|---|---|
| Lazy-loaded modals | Slight delay on first open | Use fallback={null} — modal not visible until loaded |
| Route lazy loading | Flash of empty content | Existing <Suspense fallback={<div />}> handles this |
CrokContainer imports: react-markdown, rehype-katex, react-syntax-highlighter (very heavy)NewPostModalContainer imports: convert_movie.ts (canvas/MediaRecorder), convert_image.ts<Suspense> around <Routes> — CrokContainer inside routes benefits automatically