capacitor-performance by cap-go/capgo-skills
npx skills add https://github.com/cap-go/capgo-skills --skill capacitor-performance让你的 Capacitor 应用运行快速且响应灵敏。
// 不好 - 所有插件在启动时加载
import { Camera } from '@capacitor/camera';
import { Filesystem } from '@capacitor/filesystem';
import { Geolocation } from '@capacitor/geolocation';
// 好 - 需要时再加载
async function takePhoto() {
const { Camera } = await import('@capacitor/camera');
return Camera.getPhoto({ quality: 90 });
}
# 分析包体积
bunx vite-bundle-visualizer
# 摇树优化导入
import { specific } from 'large-library'; // 好
import * as everything from 'large-library'; // 不好
// 使用合适的质量
const photo = await Camera.getPhoto({
quality: 80, // 不要用 100
width: 1024, // 限制尺寸
resultType: CameraResultType.Uri, // 不要用 Base64
});
// 图片懒加载
<img loading="lazy" src={url} />
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
// 不好 - 多次桥接调用
for (const item of items) {
await Storage.set({ key: item.id, value: item.data });
}
// 好 - 单次批量调用
await Storage.set({
key: 'items',
value: JSON.stringify(items),
});
/* GPU 加速 */
.animated {
transform: translateX(100px);
will-change: transform;
}
/* 避免 - 触发布局 */
.animated {
left: 100px;
}
// 对长列表使用虚拟列表
import { VirtualScroller } from 'your-framework';
<VirtualScroller
items={items}
itemHeight={60}
renderItem={(item) => <ListItem item={item} />}
/>
import { debounce } from 'lodash-es';
const handleScroll = debounce((e) => {
// 处理滚动事件
}, 16); // ~60fps
import { App } from '@capacitor/app';
// 存储监听器句柄
const handle = await App.addListener('appStateChange', callback);
// 在组件卸载时清理
onUnmount(() => {
handle.remove();
});
// 处理完大型数据后清空
let largeData = await fetchLargeData();
processData(largeData);
largeData = null; // 允许垃圾回收
| 指标 | 目标 |
|---|---|
| 首次绘制 | < 1s |
| 可交互时间 | < 3s |
| 帧率 | 60fps |
| 内存 | 稳定,无增长 |
| 包体积 | < 500KB (gzipped) |
每周安装量
69
代码仓库
GitHub 星标数
18
首次出现
2026年2月6日
安全审计
安装于
gemini-cli68
opencode66
github-copilot64
codex64
amp62
kimi-cli62
Make your Capacitor apps fast and responsive.
// BAD - All plugins loaded at startup
import { Camera } from '@capacitor/camera';
import { Filesystem } from '@capacitor/filesystem';
import { Geolocation } from '@capacitor/geolocation';
// GOOD - Load when needed
async function takePhoto() {
const { Camera } = await import('@capacitor/camera');
return Camera.getPhoto({ quality: 90 });
}
# Analyze bundle
bunx 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
| Metric | Target |
|---|---|
| First Paint | < 1s |
| Time to Interactive | < 3s |
| Frame Rate | 60fps |
| Memory | Stable, no growth |
| Bundle Size | < 500KB gzipped |
Weekly Installs
69
Repository
GitHub Stars
18
First Seen
Feb 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli68
opencode66
github-copilot64
codex64
amp62
kimi-cli62
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
4,400 周安装