Flutter Web部署至GitHub Pages后加载缓慢，如何优化提速？

构建配置优化 #

• 优先使用官方构建参数指定路径，不要手动修改index.html的base标签，避免路径解析开销，构建命令示例：
  flutter build web --release --base-href "/web/" --web-renderer canvaskit --obfuscate --split-debug-info ./debug-info
  各参数作用：
  • --release 启用生产环境编译，默认开启代码压缩、摇树优化，剔除无用代码
  • --base-href 自动生成规范的base标签，避免手动修改的格式错误
  • --web-renderer 指定渲染器，canvaskit比html渲染器加载性能更稳定
  • --obfuscate 混淆代码同时减小产物体积，--split-debug-info 用于保存调试映射文件，不影响线上性能
• 开启延迟加载拆分路由：将非首页的路由全部用Dart的deferred loading语法拆分，首屏仅加载首页核心代码，其他路由代码等用户触发访问时再加载，可将首屏JS体积降低30%~70%。

静态资源优化 #

• 所有图片资源转成WebP格式，比同清晰度的PNG/JPG体积小30%以上，动图优先用压缩后的APNG替代GIF。
• 提前压缩静态资源：将构建产物中所有.html、.js、.css、.json文件提前做gzip压缩，上传时同时保留原文件和对应.gz后缀的压缩文件，GitHub Pages会优先返回压缩后的资源，可将文本类资源体积降低60%以上。
• 清理无用资源：构建前删除assets目录中未被引用的图片、配置文件，避免冗余资源被打包进产物。

加载逻辑优化 #

• 在index.html的head标签中添加核心资源预加载配置，提前加载首屏必须的main.dart.js、核心字体等资源，减少请求等待时间，示例配置：
  <link rel="preload" href="main.dart.js" as="script">
• 通用第三方JS库优先用独立CDN引入，不要编译进Dart的JS产物中，减少主包体积。
• 禁用不需要的平台特性：如果你的应用没有用到文件系统、多窗口等Web API，可在pubspec.yaml中配置排除对应依赖，进一步缩减核心包体积。

常见慢加载原因排查 #

• 检查base标签路径是否完全匹配你的GitHub Pages二级路径，路径错误会导致浏览器反复发起重定向请求，大幅拉长加载时间。
• 排查是否有大体积的首屏同步加载资源，比如超过200KB的首屏图、全量的字典配置文件，将这类资源改成懒加载即可快速提升首屏速度。

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