performance

Performance Optimisation Guidelines

Directives for performance-sensitive code. Apply when building or optimising Electron, React, or web applications.

---

Performance Fundamentals

Key metrics to track

• Loading: FCP, LCP, FID, CLS
• Runtime: heap used, heap total, RSS
• Bundle: main chunk size, renderer chunk size, total size
• Electron: main process memory, renderer process memory

Performance budgets (reference)

Metric	Target	Typical threshold
FCP	< 1.5s	1500 ms
LCP	< 2.5s	2500 ms
FID	< 100 ms	100 ms
Main bundle	< 1 MB	1024 KB
Renderer bundle	< 2 MB	2048 KB
Heap used	< 512 MB	512 MB
Memory leak	< 10 MB/min	10 MB

---

Bundle Optimisation

Code splitting

• Do lazy-load routes with React.lazy and Suspense
• Do lazy-load heavy components (charts, tables, editors)

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Chart = lazy(() => import('./components/Chart'));

• Do wrap lazy-loaded routes in <Suspense> with a fallback
• Don't import everything at the top level; use dynamic imports for feature modules

Tree shaking

• Do use named exports instead of default exports for utilities
• Do import only what you need from libraries (e.g. import Button from '@mui/material/Button')

import { Button } from '@/components/ui'; // not import * from '@mui/material'

• Don't use barrel files that re-export everything; prefer selective exports

Dynamic imports

• Do use import() for feature modules that are conditionally loaded
• Do load heavy libraries (charts, analytics) only when needed

Bundle analysis

• Do run webpack-bundle-analyzer or vite-bundle-analyzer regularly
• Do add npm run analyze to build scripts
• Don't ship large dependencies without checking their impact

---

Memory Management

Leak prevention

• Do return a cleanup function from every useEffect that registers listeners, timers, or subscriptions
• Do remove event listeners in useEffect cleanup