Web 渲染器

你可以選擇兩種不同的渲染器來執行和建構 Web 應用。下文介紹兩種渲染器以及它們的適用場景:

你可以選擇兩種不同的渲染器來執行和建構 Web 應用。下文介紹兩種渲染器以及它們的適用場景。

使用 HTML 渲染
使用 HTML，CSS，Canvas 和 SVG 元素來渲染，應用的大小相對較小。

使用 CanvasKit 渲染
應用在移動和桌面端保持一致，有更好的效能，以及降低不同瀏覽器渲染效果不一致的風險。但是應用的大小會增加大約 2MB。

命令列引數

--web-renderer 可選引數值為 auto、html 或 canvaskit。

• auto（預設）- 自動選擇渲染器。移動端瀏覽器選擇 HTML，桌面端瀏覽器選擇 CanvasKit。

• html - 強制使用 HTML 渲染器。

• canvaskit - 強制使用 CanvasKit 渲染器。

此選項適用於 run 和 build 命令。例如：

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

如果執行/建構目標是非瀏覽器裝置（即移動裝置或桌面裝置），這個選項會被忽略。

配置執行時

要覆寫 web 即時渲染器請執行以下操作：

• 使用 auto 選項建構應用。

• 準備一個 renderer 屬性設定為 "canvaskit" 或 "html" 的配置物件。

• 將這個物件在 Flutter Web 應用初始化 的時候傳給 engineInitializer.initializeEngine(configuration); 方法。

let useHtml = // ...
_flutter.loader.loadEntrypoint({
  onEntrypointLoaded: async function(engineInitializer) {
    // Run-time engine configuration
    let config = {
      renderer: useHtml ? "html" : "canvaskit",
    }
    let appRunner = await engineInitializer.initializeEngine(config);

    await appRunner.runApp();
  }
});

Flutter engine 啟動之後無法再在 main.dart.js 更換 web 渲染器。

選擇合適的渲染器

如果您在移動端瀏覽器平臺上更關心應用大小，而桌面端瀏覽器更關心效能，請選擇 auto 選項（預設）。

如果您在移動端和桌面端都更關心應用大小，請選擇 html 選項。

canvaskit：移動端和桌面端都更關心效能，和跨瀏覽器的畫素級一致性。

範例

在 Chrome 瀏覽器上使用預設 (auto) 渲染器執行：

flutter run -d chrome

使用預設 (auto) 渲染器建構應用（釋出模式）：

flutter build web --release

使用 CanvasKit 渲染器建構應用（釋出模式）：

flutter build web --web-renderer canvaskit --release

使用 HTML 渲染器建構應用（釋出模式）：

flutter run -d chrome --web-renderer html --profile