Capacitor Performance

cap-go/capgo-skills/skills/capacitor-performance

作者 cap-go2cfb277a1488無授權條款72 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫今天更新

Performance optimization guide for Capacitor apps covering bundle size, rendering, memory, native bridge, and profiling. Use this skill when users need to optimize their app performance.

僅含說明Software Development

AI 產生的概覽

針對 Capacitor 應用程式的效能最佳化指南，涵蓋套件大小、渲染、記憶體與效能分析。

功能: 此技能提供 Capacitor 應用程式的效能最佳化指南，包括外掛延遲載入、縮減套件大小、圖片最佳化，以及減少原生橋接呼叫。它也提供渲染效能、記憶體管理，以及使用 Chrome DevTools、Xcode Instruments 和 Android Profiler 進行效能分析的指引。內容包含首次繪製、可互動時間、畫面更新率、記憶體與套件大小的目標指標。
適用情境: 當 Capacitor 應用程式執行緩慢、有記憶體問題、動畫卡頓，或需要效能分析與整體效能調校時使用。
執行需求: 除代理程式外不需要指令碼或特殊工具；指南中提及 Chrome DevTools、Xcode Instruments 和 Android Profiler 等選用的分析工具。

Performance Optimization for Capacitor

Make your Capacitor apps fast and responsive.

When to Use This Skill

User has slow app
User wants to optimize
User has memory issues
User needs profiling
User has janky animations

Quick Wins

1. Lazy Load Plugins

typescript

// BAD - All plugins loaded at startupimport { Camera } from '@capacitor/camera';import { Filesystem } from '@capacitor/filesystem';import { Geolocation } from '@capacitor/geolocation';
// GOOD - Load when neededasync function takePhoto() {  const { Camera } = await import('@capacitor/camera');  return Camera.getPhoto({ quality: 90 });}

// BAD - All plugins loaded at startupimport { Camera } from '@capacitor/camera';import { Filesystem } from '@capacitor/filesystem';import { Geolocation } from '@capacitor/geolocation';
// GOOD - Load when neededasync function takePhoto() {  const { Camera } = await import('@capacitor/camera');  return Camera.getPhoto({ quality: 90 });}

2. Reduce Bundle Size

bash

# Analyze bundlenpx vite-bundle-visualizer
# Tree-shake importsimport { specific } from 'large-library';  // Goodimport * as everything from 'large-library'; // Bad

# Analyze bundlenpx vite-bundle-visualizer
# Tree-shake importsimport { specific } from 'large-library';  // Goodimport * as everything from 'large-library'; // Bad

3. Optimize Images

typescript

// Use appropriate qualityconst 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} />

// Use appropriate qualityconst 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} />

4. Minimize Bridge Calls

typescript

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

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

Rendering Performance

Use CSS Transforms

css

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

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

Virtual Scrolling

typescript

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

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

Debounce Events

typescript

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

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

Memory Management

Cleanup Listeners

typescript

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

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

Avoid Memory Leaks

typescript

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

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

Profiling

Chrome DevTools

Connect via chrome://inspect
Performance tab > Record
Analyze flame chart

Xcode Instruments

Product > Profile
Choose Time Profiler
Analyze hot paths

Android Profiler

View > Tool Windows > Profiler
Select CPU/Memory/Network
Record and analyze

Metrics to Track

Resources

Chrome DevTools: https://developer.chrome.com/docs/devtools
Xcode Instruments: https://developer.apple.com/instruments

來源與署名

來源：cap-go/capgo-skills位於skills/capacitor-performance提交2cfb277

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Metric	Target
First Paint	< 1s
Time to Interactive	< 3s
Frame Rate	60fps
Memory	Stable, no growth
Bundle Size	< 500KB gzipped

Capacitor Performance

Performance Optimization for Capacitor

When to Use This Skill

Quick Wins

1. Lazy Load Plugins

2. Reduce Bundle Size

3. Optimize Images

4. Minimize Bridge Calls

Rendering Performance

Use CSS Transforms

Virtual Scrolling

Debounce Events

Memory Management

Cleanup Listeners

Avoid Memory Leaks

Profiling

Chrome DevTools

Xcode Instruments

Android Profiler

Metrics to Track

Resources

來源與署名

更多來自 cap-go/capgo-skills 的技能

Webapp To Capacitor

Tailwind Capacitor

Safe Area Handling

Konsta Ui

Ios Android Logs

Ionic Design

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices