How Meituan Achieved Write‑Once‑Run‑Anywhere with Flutter Web

Background

Meituan Waimai serves millions of merchants on PC and mobile apps, providing order fulfillment, operations, advertising and frequent external H5 pages (e.g., merchant academy, community). Consistent experience across these channels and fast multi‑platform iteration are critical.

MTFlutter is the company‑wide Flutter ecosystem covering >90% of merchant‑side app functionality and offering a full development‑test‑release‑operations loop. Leveraging this foundation, the team explored full‑stack reuse for Android, iOS, PC and H5 using Flutter Web.

Challenges

Flutter Web status

Build output is a single main.dart.js (~1.1 MB uncompressed) without JS splitting, hashing or CDN upload, causing poor load performance.

The custom scrolling implementation frequently recalculates positions, leading to sluggish scroll performance.

MTFlutter status

Core dependencies (Request, Router, analytics, container bridges) lack Web implementations.

MTFlutter supports module packaging for native platforms but does not support Web build and deployment.

Overall Design

The MTFlutter + Web architecture requires extensive work on the Web side: extending core dependencies, improving engineering tooling, and optimizing both load and scroll performance.

Detailed Design

1. Core Dependency Construction

Enterprise‑level libraries (request, router, analytics) must be re‑implemented for Web. Flutter packages are divided into two categories:

Dart Package : pure Dart code compiled to JavaScript via dart2js. Platform‑specific APIs (e.g., dart:io) need conditional handling.

Plugin Package : native implementations accessed through MethodChannel; on Web they are built as federated plugins using package:js to call JavaScript SDKs.

Conditional compilation example:

import 'package:flutter/foundation.dart';
if (kIsWeb) {
  print('Web side');
} else {
  print('Other side');
}

File‑level conditional import/export:

// tool.dart
export 'src/tool_native.dart' // fallback
  if (dart.library.html) 'src/tool_web.dart';

2. Performance Optimization

Loading performance

The default flutter build web produces a large main.dart.js and separate xxx.part.js files without CDN support. Three optimizations were introduced:

Hash static resources and update all references.

Split the main JS bundle into smaller chunks loaded in parallel via XHR.

Inject a meta tag with an assetBase CDN URL; the runtime reads this value for all assets, including JS parts.

Scroll performance

Flutter Web creates a new Canvas for each scroll event, consuming 10‑70 MB per frame. By modifying the Flutter SDK to cache Canvas objects within a threshold, memory pressure is reduced and scroll FPS improves.

3. Build and Deployment

A custom Docker image containing the MTFlutter Web environment reduces installation time (>80 s) and is integrated into the internal Talos CI system. The pipeline consists of:

Flutter‑Web‑Build : Docker‑based compilation of the Web bundle.

Flutter‑Web‑Publish : Uploading artifacts to Meituan’s storage service.

Results

Effect demonstration

Both native Flutter and Flutter Web render the merchant academy video page with identical visual and interactive experience.

Page load performance

Full page load time dropped from 1300 ms (TP50) to 580 ms (TP50) after the optimizations.

Scroll performance

Memory usage stabilised around 100 MB and scroll FPS increased noticeably; complex pages with heavy animations still show some latency.

Iteration efficiency

Reusing the same code base for App and H5 boosted development efficiency by >40 %, with a projected increase to >60 % as PC support matures.

Conclusion and Outlook

Meituan Waimai’s multi‑modal business and strong Flutter foundation made cross‑platform reuse feasible. Flutter Web now delivers near‑native experience on both App and H5, laying groundwork for broader adoption. Future work includes deeper scroll and load performance tuning, full Web‑centric tooling, PC‑side reuse, and tracking upcoming Flutter Web improvements such as CanvasKit optimizations.