Flutter Web应用如何实现页面按需加载以提升性能？

Flutter完全支持页面级及组件级的懒加载，这正是解决低端设备路由跳转卡顿问题的有效方案。核心思路是延迟初始化重型页面/组件内容，避免在路由切换时一次性阻塞UI线程。以下是具体实现方式和优化建议：

1. 路由级延迟加载 #

不在路由跳转时直接构建完整重型页面，而是先返回轻量占位组件，待当前帧绘制完成后再异步初始化页面内容：

Navigator.push(context, MaterialPageRoute(
  builder: (context) => LazyLoadedPage(),
));

class LazyLoadedPage extends StatefulWidget {
  @override
  _LazyLoadedPageState createState() => _LazyLoadedPageState();
}

class _LazyLoadedPageState extends State<LazyLoadedPage> {
  Widget? _pageContent;

  @override
  void initState() {
    super.initState();
    // 延迟到当前帧结束后执行，避免阻塞UI
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        _pageContent = YourHeavyPageContent(); // 包含复杂组件/计算的页面内容
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("懒加载页面")),
      body: _pageContent ?? Center(child: CircularProgressIndicator()),
    );
  }
}

2. 页面内组件级懒加载 #

针对页面中局部的重型模块（如复杂图表、大量列表项），可监听滚动位置，仅当组件进入视口时才加载：

class LazyHeavyModule extends StatefulWidget {
  @override
  _LazyHeavyModuleState createState() => _LazyHeavyModuleState();
}

class _LazyHeavyModuleState extends State<LazyHeavyModule> {
  final ScrollController _scrollController = ScrollController();
  bool _isModuleVisible = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_checkVisibility);
    WidgetsBinding.instance.addPostFrameCallback((_) => _checkVisibility());
  }

  void _checkVisibility() {
    final renderBox = context.findRenderObject() as RenderBox?;
    if (renderBox == null) return;
    final viewportHeight = MediaQuery.of(context).size.height;
    final moduleOffset = renderBox.localToGlobal(Offset.zero).dy;
    final moduleHeight = renderBox.size.height;
    
    setState(() {
      _isModuleVisible = moduleOffset < viewportHeight && moduleOffset + moduleHeight > 0;
    });
  }

  @override
  void dispose() {
    _scrollController.removeListener(_checkVisibility);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _isModuleVisible 
        ? HeavyChartModule() // 重型组件
        : SizedBox(height: 400); // 占位容器，高度与重型组件一致
  }
}

额外性能优化建议 #

• 禁止在build方法中执行耗时计算、数据解析等操作，所有重型逻辑必须异步处理。
• 对于图片资源，使用Image.network的loadingBuilder设置占位图，避免空白或卡顿。
• 启用Flutter Web的Skia渲染引擎：在构建命令中添加--dart-define=FLUTTER_WEB_USE_SKIA=true，Skia比CanvasKit更轻量，更适配低端设备。

内容的提问来源于stack exchange，提问作者Oluwatobiloba Johnson