mcpField
E
expo

expo

github.com/pproenca开发218556 次安装11 周前更新
代码仓库

关于 expo

面向 Expo React Native 开发者的性能实践指南，包含 54 条分为 9 类的优先级规则，涉及启动、资源包、列表、图像、数据获取、导航、渲染、动画和内存。

主要功能

  1. 01涵盖 9 类的 54 条规则
  2. 02按优先级排列性能建议
  3. 03应用启动与资源包优化
  4. 04列表与图像性能实践
  5. 05数据、导航、渲染与内存指导

适用场景

  1. 01缩短应用启动时间
  2. 02减少资源包体积与内存使用
  3. 03优化列表、图像和动画
  4. 04检查移动应用代码的性能问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pproenca/dot-skills --skill expo

安装后在 Claude Code 中输入/expo确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
metadata.json
README.md
assets/templates/
_template.md
references/
_sections.md
anim-avoid-layout-animation.md
anim-gesture-handler-integration.md
anim-interaction-manager.md
anim-use-native-driver.md
anim-use-reanimated.md
bundle-analyze-size.md
bundle-avoid-barrel-files.md
bundle-enable-proguard.md
bundle-optimize-fonts.md
bundle-remove-unused-dependencies.md
bundle-split-by-architecture.md
bundle-use-lightweight-alternatives.md
data-abort-requests.md
data-cache-strategies.md
data-optimistic-updates.md
data-pagination.md
data-parallel-fetching.md
data-request-deduplication.md
image-lazy-load-offscreen.md
image-preload-critical.md
image-resize-to-display-size.md
image-use-expo-image.md
image-use-placeholders.md
image-use-webp-format.md
launch-defer-non-critical.md

详细介绍

社区版 Expo React Native 最佳实践

Expo React Native 应用的全面性能优化指南。包含 9 个类别中的 54 条规则，并按影响程度排序，为自动重构和代码生成提供指导。

适用场景

在以下情况下参考这些指南：

  • 编写新的 Expo React Native 组件
  • 优化应用启动和交互时间
  • 实现列表、图像或动画
  • 减少包体积和内存占用
  • 检查代码中的移动端性能问题

按优先级划分的规则类别

优先级类别影响前缀
1启动时间优化CRITICALlaunch-
2包体积优化CRITICALbundle-
3列表虚拟化HIGHlist-
4图像优化HIGHimage-
5数据获取模式HIGHdata-
6导航性能MEDIUM-HIGHnav-
7防止重新渲染MEDIUMrerender-
8动画性能MEDIUManim-
9内存管理LOW-MEDIUMmem-

快速参考

1. 启动时间优化（CRITICAL）
  • launch-splash-screen-control - 在资源加载期间控制启动屏幕的显示
  • launch-preload-critical-assets - 在启动屏幕显示期间预加载字体和图像
  • launch-hermes-engine - 使用 Hermes 引擎加快启动速度
  • launch-defer-non-critical - 延迟非关键初始化
  • launch-new-architecture - 启用新架构，实现同步原生通信
  • launch-minimize-root-imports - 减少根 App 组件中的导入
2. 包体积优化（CRITICAL）
  • bundle-avoid-barrel-files - 避免从汇总文件导入
  • bundle-analyze-size - 发布前分析包体积
  • bundle-remove-unused-dependencies - 移除未使用的依赖项
  • bundle-split-by-architecture - 生成特定架构的 APK
  • bundle-enable-proguard - 为 Android 发布构建启用 ProGuard
  • bundle-optimize-fonts - 为自定义字体生成仅包含所用字符的子集
  • bundle-use-lightweight-alternatives - 使用轻量级库替代方案
3. 列表虚拟化（HIGH）
  • list-use-flashlist - 使用 FlashList 替代 FlatList
  • list-provide-estimated-size - 提供准确的 estimatedItemSize
  • list-avoid-inline-functions - 避免在 renderItem 中使用内联函数
  • list-provide-getitemlayout - 为固定高度的条目提供 getItemLayout
  • list-avoid-key-prop - 避免在 FlashList 条目内部使用 key 属性
  • list-batch-rendering - 配置列表批量渲染
  • list-memoize-item-components - 对列表条目组件使用记忆化
4. 图像优化（HIGH）
  • image-use-expo-image - 使用 expo-image 替代 React Native Image
  • image-resize-to-display-size - 将图像调整为显示尺寸
  • image-use-webp-format - 使用 WebP 格式以减小文件体积
  • image-use-placeholders - 使用 BlurHash 或 ThumbHash 占位图
  • image-preload-critical - 预加载首屏关键图像
  • image-lazy-load-offscreen - 延迟加载屏幕外的图像
5. 数据获取模式（HIGH）
  • data-parallel-fetching - 并行获取相互独立的数据
  • data-request-deduplication - 对并发请求进行去重
  • data-abort-requests - 在组件卸载时中止请求
  • data-pagination - 实现高效的分页策略
  • data-cache-strategies - 使用恰当的缓存策略
  • data-optimistic-updates - 应用乐观更新以提升响应速度
6. 导航性能（MEDIUM-HIGH）
  • nav-use-native-stack - 使用原生堆栈导航器
  • nav-unmount-inactive-screens - 卸载非活动的标签页屏幕
  • nav-prefetch-screen-data - 在导航前预取数据
  • nav-optimize-screen-options - 优化屏幕选项
  • nav-avoid-deep-nesting - 避免导航器深度嵌套
7. 防止重新渲染（中）
  • rerender-use-memo-components - 使用 React.memo 缓存开销较大的组件
  • rerender-use-callback - 使用 useCallback 保持回调稳定
  • rerender-use-memo-values - 使用 useMemo 缓存开销较大的计算
  • rerender-avoid-context-overuse - 避免在频繁更新时过度使用 Context
  • rerender-split-component-state - 拆分组件，以隔离更新状态
  • rerender-use-react-compiler - 启用 React Compiler 以自动缓存
  • rerender-avoid-anonymous-components - 避免在 JSX 中使用匿名组件
8. 动画性能（中）
  • anim-use-reanimated - 使用 Reanimated 在 UI 线程上执行动画
  • anim-use-native-driver - 为 Animated API 启用 useNativeDriver
  • anim-avoid-layout-animation - 优先使用变换，而非布局动画
  • anim-gesture-handler-integration - 将 Gesture Handler 与 Reanimated 搭配使用
  • anim-interaction-manager - 在动画期间延后执行繁重任务
9. 内存管理（低至中）
  • mem-cleanup-useeffect - 清理订阅和计时器
  • mem-abort-fetch-requests - 在卸载时中止 fetch 请求
  • mem-avoid-closure-leaks - 避免基于闭包的内存泄漏
  • mem-release-heavy-resources - 不再需要时释放占用大量资源的对象
  • mem-profile-with-tools - 使用开发工具分析内存用量

使用方法

阅读各个参考文件，了解详细说明和代码示例：

完整编译文档

查看包含所有展开规则的完整指南：AGENTS.md

评论

支持 Markdown