Flutter Web热重载性能问题求助：如何减少页面重载耗时？

修改代码后遇到性能问题：热重载会重新加载整个页面，导致API请求重复发起，简单的布局修改耗时大幅增加。查阅过热重载/热重启相关资料但没找到满意方案，知道Flutter Web用Canvas渲染，应该存在无需整页重绘就能重载修改的方式。这个问题在小型应用里影响不大，但考虑扩展性时就很突出。

开发环境 #

• Docker（镜像：emirdeliz/flutter）
• 多仓库方案（多个小型项目作为依赖）
• VSCode（launch.json配置如下）

{
    "name": "Web hom",
    "cwd": "flut_base_web",
    "program": "lib/main_hom.dart",
    "request": "launch",
    "type": "dart",
    "args": ["--web-port", "8080", "--web-renderer", "auto", "--hot"]
}

Chrome性能报告截图 #

请问有没有办法减少修改后的页面重载耗时？

可行优化方案 #

1. 锁定Web渲染器为CanvasKit
   配置里用了--web-renderer auto，默认在桌面端可能切换到HTML渲染器，而CanvasKit的热重载逻辑更接近移动端，不会触发整页刷新。把启动参数改成--web-renderer canvaskit，能避免整页重载导致的API重复请求。

2. 缓存API请求结果
   在代码层面对API请求做缓存，比如用内存缓存或本地存储，页面初始化时先检查缓存，存在就直接使用，不重复发起请求。示例代码：

   class ApiCache {
     static final ApiCache _instance = ApiCache._internal();
     factory ApiCache() => _instance;
     ApiCache._internal();
   
     Map<String, dynamic> _cache = {};
   
     Future<dynamic> fetchData(String url) async {
       if (_cache.containsKey(url)) {
         return _cache[url];
       }
       final response = await http.get(Uri.parse(url));
       final data = jsonDecode(response.body);
       _cache[url] = data;
       return data;
     }
   }
   

3. 排查多仓库依赖的热重载兼容性
   多仓库依赖可能导致热重载时无法仅重载修改模块，而是触发全量刷新。确保每个依赖仓库正确配置pubspec.yaml，开发模式下使用路径依赖（而非pub发布版本），让Flutter能识别依赖代码变更，只重载相关部分。

4. 调整热重载触发时机
   在VSCode的Dart插件设置里，将热重载触发时机改为仅保存文件时触发，避免实时修改时的频繁触发。同时检查是否有生成文件的变更误触发热重载。

5. 升级Flutter版本
   Flutter团队持续优化Web端热重载性能，较新版本可能修复了整页刷新的bug，尝试升级到稳定版最新版本验证问题是否解决。

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