Flutter Web首屏加载机制：是否全量加载所有页面资源？

默认配置下的Flutter Web release构建，首屏进入时会一次性加载全量核心资源，不会自动按路由按需加载页面内容。
本质原因是Flutter Web默认采用单页应用全量打包逻辑：所有业务代码（包括所有路由页面对应的逻辑、组件）会被编译成一个主main.dart.js脚本，加上初始化必须的flutter.js运行时、渲染引擎资源，会在用户第一次输入地址访问时全部拉取完成，之后才会完成框架初始化、渲染首屏内容。这和传统多页网站每次跳转只拉取对应页面资源的逻辑不一样，也正是大型Flutter Web站点默认包体积偏大、首屏加载慢的核心原因。

• 无特殊优化的默认构建：全量加载。所有页面、功能模块的代码都会被打进主js包，哪怕用户永远不会访问站点的深层页面，这部分代码也会在首屏被下载。
• 配置延迟导入（deferred import）的构建：支持按需加载。你可以手动给非首屏模块、非核心功能加上延迟导入标记，构建时Flutter会自动把这部分代码拆成独立的js分片，只有当用户实际触发对应页面/功能的访问逻辑时，浏览器才会下载对应的分片资源，不会占用首屏加载体积。
• 不同渲染模式的加载差异：默认使用CanvasKit渲染的构建，首屏会额外拉取数MB大小的CanvasKit wasm引擎包；如果切换为HTML渲染模式，这部分资源不会出现在首屏加载列表里。

• 路由级代码拆分：所有非首屏的路由页面统一使用延迟导入，示例写法：

  // 延迟导入非首屏的详情页
  import 'pages/detail.dart' deferred as detail_page;
  
  // 路由跳转前先加载对应分片
  onTap: () async {
    await detail_page.loadLibrary();
    Navigator.push(context, MaterialPageRoute(builder: (_) => detail_page.DetailPage()));
  }
  

  构建后这部分页面的代码会完全从主js包剥离，首屏不会加载。
• 渲染模式选型：如果业务不需要严格的跨端渲染像素级一致，构建release包时加上--web-renderer html参数，用HTML渲染模式替代默认CanvasKit，首屏可直接减少2-3MB的wasm资源加载量。
• 静态资源剥离：不要把大体积的图片、自定义字体全部配置到pubspec.yaml中打包进应用，首屏用到的核心资源做预加载，非首屏的资源等用户进入对应页面时再通过网络动态拉取。
• 无效代码清理：release构建默认开启tree shake，要及时移除未使用的插件、主入口中非必要的模块导入，避免无用代码被打进主包。

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