How do you optimize Flutter Web performance?
TL;DR: Use deferred imports for code splitting, choose the right renderer (--web-renderer auto), tree-shake icons (--tree-shake-icons), lazy-load images with cacheWidth/cacheHeight, enable CDN caching for static assets, and minimize unnecessary widget rebuilds.
Full Answer
Code Splitting with Deferred Imports
Dart's deferred imports load code on demand. A route's Dart code is not downloaded until the user navigates to it. go_router supports deferred loading natively.
Renderer and Bundle Size
CanvasKit downloads ~1.5MB of WASM. HTML renderer is lighter but less faithful. --tree-shake-icons removes unused Material icon data (~300KB saving). --release enables Dart2JS optimizations.
Chrome DevTools Coverage tab shows unused JS. Aim for < 20% unused bytes in your main bundle. Deferred loading is the primary tool for reducing initial bundle size.
Code Examples
// Without deferred: all routes in one ~3MB bundle // With deferred: core ~1.5MB, routes loaded on demand // --tree-shake-icons: saves ~300KB icon font data
Common Mistakes
- ✗Not using deferred loading for large page widgets — all route code included in initial bundle
- ✗Full-resolution images without cacheWidth/cacheHeight — wastes memory and bandwidth
Interview Tip
Measure with Chrome Coverage tab. Deferred loading is Dart's equivalent of dynamic import() in JavaScript — the interviewer may ask you to compare these.