最近用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/
修改镜像源之前:

修改镜像源之后:

**2、**字体,Flutter web默认使用Noto字体,一般电脑上都不会带有这个字体,所以会在线加载这个字体,导致加载缓慢还会产生乱码,这个字体加载地址"https://fonts.googleapis.com

本文针对Flutter for Web应用首次加载出现长时间白屏问题进行优化,主要从两个方面着手:一是通过更换Canvaskit的加载地址,使用国内CDN加速;二是处理字体加载,避免在线加载Noto字体导致的延迟和乱码,可选择自定义字体并精简资源。此外,删除不必要的系统资源包和添加加载动画也能提升用户体验。
最低0.47元/天 解锁文章
507

被折叠的 条评论
为什么被折叠?



