What is code-splitting in Flutter, and how does it help?

Overview

Code splitting is a technique to break your app's code into smaller chunks that are loaded only when needed, rather than loading everything upfront. This reduces initial load time and app bundle size.

Code Splitting in Flutter Web

Code splitting is primarily relevant for Flutter Web. On mobile (iOS/Android), the AOT-compiled binary is already optimized. On web, JavaScript bundles can become large.

bashCopy
# Build Flutter web with deferred loading enabled
flutter build web

Deferred Loading (Dart's Built-in Code Splitting)

Dart supports code splitting via the

deferred as

dartCopy
// Import the library as deferred
import 'package:my_app/features/analytics/analytics.dart' deferred as analytics;

// Load and use it only when needed
Future<void> initAnalytics() async {
  await analytics.loadLibrary(); // Downloads the library chunk on demand
  analytics.Analytics.init();
}

// In a button handler
ElevatedButton(
  onPressed: () async {
    await analytics.loadLibrary();
    analytics.Analytics.trackEvent('purchase');
  },
  child: Text('Complete Purchase'),
)

Practical Example — Heavy Feature Screen

dartCopy
import 'package:my_app/screens/video_editor.dart' deferred as videoEditor;

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // Only downloads VideoEditor code when user taps
            await videoEditor.loadLibrary();
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) => videoEditor.VideoEditorScreen(),
              ),
            );
          },
          child: Text('Open Video Editor'),
        ),
      ),
    );
  }
}

How It Helps

On Mobile vs Web

Android App Bundle (Mobile Code Splitting)

bashCopy
# Build Android App Bundle — Google Play delivers only what the device needs
flutter build appbundle

# Play Store handles: architecture splits, language splits, density splits
# Users download only APK subset for their device

When to Use Deferred Loading

Key Benefit: Deferred loading reduces the Time To Interactive (TTI) for Flutter Web apps by deferring heavy code until it's actually needed. On mobile, use App Bundles to let the Play Store handle code/asset splitting per device.