Flutter Web 在 ios safari/chrome 上挂起，没有错误

Question

我已将 flutter web 应用程序部署到https://buildcode.app，但该网站在 ios chrome/safari 上挂起，而在 android 或桌面上则挂起。当我使用控制台检查时，没有出现运行时错误，我不确定在这种情况下如何调试。

Answer 1

这里的渲染器可能存在问题，因为 flutter 使用两个渲染器 html 和 canvaskit 以及 auto（默认），如果我们不选择使用哪个渲染器，它会选择最适合目标平台的渲染器，因为当应用程序运行在当应用程序在桌面浏览器中运行时，移动浏览器和 CanvasKit 渲染器。

HTML 渲染器：使用 HTML 元素、CSS、Canvas 元素和 SVG 元素的组合。该渲染器的下载大小较小。

CanvasKit 渲染器：该渲染器与 Flutter 移动端和桌面端完全一致，具有更快的性能和更高的 widget 密度，但下载大小增加了约 2MB。

当我们运行flutter build web时，flutter 将使用自动渲染器运行您的应用程序，因为我们没有提到用于构建/运行的渲染器。我们可以通过使用两个标志html和来指定要使用哪个渲染器canvaskit：该标志可以与 run 或 build 子命令一起使用。

例如：

flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskit

因此，请尝试使用适用于ios 版本的html 渲染器构建您的 Web 应用程序，因为此渲染器的下载大小较小，如 flutter 文档中所述。

尝试flutter build web --web-renderer html --release在控制台中运行，然后它应该在 ios chrome/safari 浏览器中完美运行。