FlutterWeb性能优化探索与实践

Question

如题所述

Answer 1

美团外卖商家端在 FlutterWeb 的性能优化实践中，面临的主要挑战是提升页面加载性能。通过结合实际业务场景，美团采取了多种策略，如选择 HTML Render 模式以优化渲染性能，针对 SDK 进行精简，如裁剪长尾功能和 Dead Code，以及采用 JS 分片、Lazy Loading、Runtime Manifest 抽离和预加载方案来减小包体积和改善加载速度。这些措施使得美团外卖商家课堂业务的页面完全加载时间 TP90 从 6s 降低至 3s，显著提升了用户体验。

在优化过程中，美团技术团队对 Dart-SDK、Flutter Framework 和 Flutter_Web_SDK 进行了深入研究，通过定制 CI/CD 系统实现 SDK 的灵活发布，并利用 Webpack 和 Rollup 技术对静态资源进行了抽离和优化。通过预加载方案，实现了不同业务间的资源共享，进一步减小了首屏加载时间。此外，还进行了分平台打包，以适应 App 和 PC 的差异，以及对图标字体的精简，有效减小了包体积。

未来，美团将继续聚焦在性能优化的持续改进上，包括对 Web 模式下的资源管理和优化，以及探索更高效的跨平台协作方式，以更好地满足多端复用的需求。