Flutter Web 加载问题优化

Flutter: v2.8.1 Flutter 3.7.0+


一、CanvasKit

配置文件:$FLUTTER/bin/cache/flutter_web_sdk/lib/_engine/engine/configuration.dart

默认加载 https://unpkg.com/canvaskit-wasm@$_canvaskitVersion/bin/ 路径下的文件,就国内而言,速度较慢且不稳定。可采用以下两种方式修改默认配置:

  1. 使用 javascript 配置, 在 web/index.html 加入以下代码:

从其他高速站点载入

<head>
  <script>
    window.flutterConfiguration = {
      canvasKitBaseUrl: "https://example.com/my-custom-canvaskit/"
    };
  </script>
</head>

或使用flutter自带版本【推荐】

<head>
  <script>
    window.flutterConfiguration = {
      canvasKitBaseUrl: "canvaskit/"
    };
  </script>
</head>
  1. 使用命令行参数配置:
flutter run -d chrome --web-renderer=canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://example.com/my-custom-canvaskit/

二、GoogleFonts

默认情况下 Flutter 会下载所有字体文件,再根据语言环境选择合适的字体。单一语言环境下,没必要下载其他的字体文件,应下载字体到本地/服务器 使用自定义字体。可避免字体文件加载过慢导致的字体渲染问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容