FlutterWeb Performance Optimization at Meituan Takeaway

Meituan Takeaway merchant client has been using FlutterWeb for multi‑platform reuse (App, PC, H5). Performance, especially page load time, was the biggest challenge.

Background : FlutterWeb became stable with Flutter 2.0 (2021). The team adopted HTML Render mode for better compatibility and smaller bundle size.

Challenges : Large bundle size, lack of static‑resource optimizations (hashing, CDN), dead code in SDK, and heavy icon font.

Overall Design : Optimize SDK, intervene in the compilation pipeline, and apply front‑end runtime optimizations.

SDK Slimming : Analyzed bundle with source‑map‑explorer, removed unused Dart‑SDK, Framework and Flutter_Web_SDK parts, and provided custom builds for long‑tail features (Bluetooth, USB, etc.). Result: JS bundle reduced from ~1.2 MB to ~0.7 MB.

Compilation Optimizations : Added file hash (MD5) and CDN support, performed JS splitting, and extracted Runtime Manifest to HTML. Implemented lazy loading with deferred as and split main.dart.js into multiple part files loaded in parallel.

Pre‑loading Scheme : Generated a cloud JSON during CI, detected first‑screen render completion via DOM, PerformanceObserver and user events, then pre‑fetches resources of other business pages via XHR, reducing subsequent page load times.

Platform‑Specific Packaging : Introduced a ResponsiveSystem tool to separate PC and mobile code, modified flutter‑tools to generate separate snapshots, achieving ~100 KB reduction per platform.

Icon Font Reduction : Scanned used icons, generated a minimal .woff using FontTools, shrinking the font from 920 KB to ~12 KB.

Results : Bundle size cut by ~40 %, page TP90 load time dropped from 6 s to 3 s, and the solution is now applied to over 10 merchant pages.

Future Work : Lower Web adaptation cost, build a FlutterWeb disaster‑recovery system, and continue performance refinements such as further separating framework code.