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