Flutter Web结合路由实现页面延迟加载的技术咨询

AutoRoute 确实支持通过 deferred loading 拆分代码块，从而减小初始加载的 main.dart.js 体积，下面是具体的实现步骤：

1. 配置依赖 #

确保你的 pubspec.yaml 中包含最新稳定版的 AutoRoute 相关依赖：

dependencies:
  auto_route: ^7.3.0 # 请使用最新稳定版

dev_dependencies:
  auto_route_generator: ^7.3.0
  build_runner: ^2.4.4

2. 定义带延迟加载的路由 #

在路由配置类中，对需要懒加载的页面使用 DeferredRoute 替代普通的 AutoRoute，并指定该页面所在文件的导入路径：

import 'package:auto_route/auto_route.dart';
import 'home_page.dart';

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: [
    AutoRoute(page: HomePage, initial: true),
    // 配置延迟加载的设置页
    DeferredRoute(
      page: SettingsPage,
      deferredImport: 'package:your_app/features/settings/settings_page.dart',
    ),
    // 其他需要懒加载的页面同理
    DeferredRoute(
      page: ProfilePage,
      deferredImport: 'package:your_app/features/profile/profile_page.dart',
    ),
  ],
)
class $AppRouter {}

3. 生成路由代码 #

运行代码生成命令，AutoRoute 会自动生成包含延迟加载逻辑的路由代码：

flutter pub run build_runner build --delete-conflicting-outputs

4. 使用路由导航 #

生成的代码会自动处理延迟加载逻辑，当你通过 context.pushRoute(SettingsRoute()) 导航到懒加载页面时，对应的代码 chunk 才会被加载，初始加载阶段不会包含这部分代码。

注意事项 #

• 确保懒加载页面的相关依赖（比如专属的状态管理类、工具方法）都和页面放在同一个文件或目录下，避免被打包到初始 chunk 中。
• 可以通过 Chrome DevTools 的 Network 面板，查看初始加载的 JS 文件大小，以及导航时是否加载了对应的拆分 chunk，验证优化效果。
• 如果使用全局状态管理（比如 Riverpod、Bloc），不要在初始加载的代码中引用懒加载页面的状态类，否则会触发提前加载，导致拆分失效。

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