本文针对Flutter for Web应用首次加载出现长时间白屏问题进行优化，主要从两个方面着手：一是通过更换Canvaskit的加载地址，使用国内CDN加速；二是处理字体加载，避免在线加载Noto字体导致的延迟和乱码，可选择自定义字体并精简资源。此外，删除不必要的系统资源包和添加加载动画也能提升用户体验。
最近用Flutter写了个Web 的demo，在demo打开第一次运行的时候，会出现较长时间的白页，经过一番研究，从下面几个方面进行了优化：
1、渲染引擎 Canvaskit 下载太慢，这个Canvaskit是从https://unpkg.com去加载的，国内访问这个地址耗时较长，通过镜像去加载能优化这个时间。我这边从网上找到的镜像地址 https://cdn.jsdelivr.net/npm（ps：目前我测下来这个镜像源应该是加载耗时最短的）。
build 项目的时候修改Canvaskit的加载地址：
flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.28.1/bin/
修改镜像源之前：
修改镜像源之后：
*
最低0.47元/天 解锁文章
扫一扫
733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
