跳到主內容

Flutter Web 提供了兩種構建模式和兩種渲染器。兩種構建模式是預設模式和WebAssembly 模式，兩種渲染器是canvaskit 和 skwasm。

Flutter 在構建應用時選擇構建模式，並在執行時確定可用的渲染器。

對於預設構建，Flutter 在執行時選擇 canvaskit 渲染器。對於 WebAssembly 構建，Flutter 在執行時選擇 skwasm 渲染器，如果瀏覽器不支援 skwasm，則回退到 canvaskit。

構建模式

#

預設構建模式

#

當使用不帶 --wasm 引數，或者傳遞 --no-wasm 引數的 flutter run 或 flutter build web 命令時，Flutter 會選擇預設模式。

此構建模式僅使用 canvaskit 渲染器。

在 Chrome 中使用預設構建模式執行

flutter run -d chrome

使用預設構建模式構建您的應用以供釋出

flutter build web

WebAssembly 構建模式

#

此模式透過向 flutter run 和 flutter build web 命令傳遞 --wasm 來啟用。

此模式使 skwasm 和 canvaskit 都可用。skwasm 需要 WasmGC，目前並非所有現代瀏覽器都支援。因此，在執行時，如果支援垃圾回收，Flutter 會選擇 skwasm，如果不支援，則回退到 canvaskit。這使得在 WebAssembly 模式下編譯的應用仍然可以在所有現代瀏覽器中執行。

--wasm 標誌不支援非 Web 平臺。

在 Chrome 中使用 WebAssembly 模式執行

flutter run -d chrome --wasm

使用 WebAssembly 模式構建您的應用以供釋出

flutter build web --wasm

渲染器

#

Flutter 有兩種渲染器（canvaskit 和 skwasm），它們重新實現了 Flutter 引擎以在瀏覽器中執行。渲染器將 UI 原始物件（儲存為 Scene 物件）轉換為畫素。

canvaskit

#

canvaskit 渲染器與所有現代瀏覽器相容，並且是預設構建模式下使用的渲染器。

它包含一個編譯為 WebAssembly 的 Skia 副本，下載大小增加了約 1.5MB。

skwasm

#

skwasm 渲染器是 Skia 的一個更緊湊的版本，它被編譯為 WebAssembly 並支援在單獨的執行緒上進行渲染。

此渲染器必須與WebAssembly 構建模式一起使用，該模式將 Dart 程式碼編譯為 WebAssembly。

要利用多執行緒，Web 伺服器必須滿足 SharedArrayBuffer 安全要求。在此模式下，Flutter 使用專用的 Web Worker 將部分渲染工作負載解除安裝到單獨的執行緒，從而利用多 CPU 核心。如果瀏覽器不滿足這些要求，skwasm 渲染器將以單執行緒配置執行。

此渲染器包含一個更緊湊的 Skia 編譯到 WebAssembly 的版本，下載大小增加了約 1.1MB。

執行時選擇渲染器

#

預設情況下，在 WebAssembly 模式下構建時，Flutter 會決定何時使用 skwasm，何時回退到 canvaskit。可以透過向載入器傳遞配置物件來覆蓋此設定，如下所示：

  1. 使用 --wasm 標誌構建應用，使 skwasm 和 canvaskit 渲染器都可供應用使用。
  2. 按照 編寫自定義 flutter_bootstrap.js 中的說明設定自定義 Web 應用初始化。
  3. 準備一個配置物件，其中 renderer 屬性設定為 "canvaskit" 或 "skwasm"。
  4. 將您準備好的配置物件作為新物件的 config 屬性，傳遞給由早期注入程式碼提供的 _flutter.loader.load 方法。

示例

html
<body>
  <script>
    {{flutter_js}}
    {{flutter_build_config}}

    // TODO: Replace this with your own code to determine which renderer to use.
    const useCanvasKit = true;

    const config = {
      renderer: useCanvasKit ? "canvaskit" : "skwasm",
    };
    _flutter.loader.load({
      config: config,
    });
  </script>
</body>

呼叫 load 方法後，無法更改 Web 渲染器。因此，關於使用哪個渲染器的任何決定都必須在呼叫 _flutter.loader.load 之前做出。

選擇要使用的構建模式

#

要將 Dart 編譯為 WebAssembly，您的應用及其外掛/包必須滿足以下要求：

  • 使用新的 JS 互操作 - 程式碼只能使用新的 JS 互操作庫 dart:js_interop。舊樣式 dart:js、dart:js_util 和 package:js 不再受支援。
  • 使用新的 Web API - 使用 Web API 的程式碼必須使用新的 package:web 而不是 dart:html。
  • 數字相容性 - WebAssembly 精確地實現了 Dart 的數字型別 int 和 double，與 Dart VM 相同。在 JavaScript 中，這些型別使用 JS Number 型別進行模擬。您的程式碼可能意外或有意地依賴於 JS 對數字的行為。如果是這種情況，則需要更新此類程式碼，使其與 Dart VM 的行為保持一致。

使用這些提示來決定使用哪種模式

  • 包支援 - 如果您的應用依賴於尚不支援 WebAssembly 的外掛和包，請選擇預設模式。
  • 效能 - 如果您的應用程式碼和包與 WebAssembly 相容且應用效能很重要，請選擇 WebAssembly 模式。與 canvaskit 相比，skwasm 具有明顯更快的應用啟動時間和幀效能。skwasm 在多執行緒模式下尤其有效，因此請考慮配置伺服器使其滿足 SharedArrayBuffer 安全要求。

除非另有說明，本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2025-01-06。 檢視原始碼 或 報告問題。