用途:该技能用于 Flutter 与 Flutter Web 的预缓存优化,目标是减少卡顿、加载闪烁、字体切换和首屏渲染延迟。核心原则是只预缓存用户接下来 1 到 2 屏可能看到的内容,不要预缓存整个应用,否则会拖慢启动并浪费内存。
主要能力:
- 字体:运行时可用 GoogleFonts.pendingFonts() 预加载字体变体;生产环境建议将关键字体打包为 assets 并在主题中通过 fontFamily 使用。
- 图片:用 precacheImage 预加载 AssetImage 或 NetworkImage,可批量预加载,也可用 Future.wait 等待完成后再渲染真实 UI。注意 precacheImage 只预热 Flutter 内存图像缓存,不提供长期离线缓存;磁盘缓存可用 cached_network_image。
- 本地 JSON/配置:用 rootBundle.loadString 预加载功能开关、本地配置、翻译等。
- 初始 API 预热:用 Future.wait 并行发起首屏关键请求。
- 动画:Lottie 可用 AssetLottie(...).load() 预加载;Rive 可先 rootBundle.load 再 RiveFile.import,并用 RiveAnimation.direct 渲染。
- Shader 预热:仅在性能分析确认存在着色器编译卡顿时使用。
- Flutter Web:思路偏向让浏览器提前下载关键文件,而非全部内存预缓存;可在 web/index.html 用 link rel=preload 预加载关键字体、图片,再配合 Flutter 的 precacheImage。注意 Web 资源 URL 常为 assets/assets/...。Emoji 可能触发字体回退,装饰性 emoji 建议首屏后显示,核心场景可打包并预加载 emoji 字体。
使用方式:在 didChangeDependencies 中调用预加载(需要 context 时不要用 initState),配合 FutureBuilder 在完成前显示启动页或加载指示器。
适用场景:首屏 logo、hero 图、背景图、头像、首屏列表图片、主字体、小配置文件、首屏翻译、首个 API 请求、立即展示的 Lottie/Rive 动画。
限制:不要预缓存全部商品图、图库、远程 feed、所有图标、所有路由图片、未立即展示的大动画、所有字重与斜体变体。资料未提供具体性能数据、收费信息或平台支持范围。