capacitor-performance

# Analyze bundle
npx vite-bundle-visualizer
 
# Tree-shake imports
import { specific } from 'large-library';  // Good
import * as everything from 'large-library'; // Bad

// Use appropriate quality
const photo = await Camera.getPhoto({
  quality: 80,        // Not 100
  width: 1024,        // Limit size
  resultType: CameraResultType.Uri,  // Not Base64
});
 
// Lazy load images
<img loading="lazy" src={url} />

// BAD - Multiple bridge calls
for (const item of items) {
  await Storage.set({ key: item.id, value: item.data });
}
 
// GOOD - Single call with batch
await Storage.set({
  key: 'items',
  value: JSON.stringify(items),
});

/* GPU accelerated */
.animated {
  transform: translateX(100px);
  will-change: transform;
}
 
/* Avoid - triggers layout */
.animated {
  left: 100px;
}

// Use virtual list for long lists
import { VirtualScroller } from 'your-framework';
 
<VirtualScroller
  items={items}
  itemHeight={60}
  renderItem={(item) => <ListItem item={item} />}
/>

import { debounce } from 'lodash-es';
 
const handleScroll = debounce((e) => {
  // Handle scroll
}, 16); // ~60fps

import { App } from '@capacitor/app';
 
// Store listener handle
const handle = await App.addListener('appStateChange', callback);
 
// Cleanup on unmount
onUnmount(() => {
  handle.remove();
});

// Clear large data when done
let largeData = await fetchLargeData();
processData(largeData);
largeData = null; // Allow GC