我知道Flutter支持在Flutter Web中使用Skia而不是DomCanvas，使用WASMCanvasKit，即"；Skia+WebAssembly"；。
我听说这提供了显著的性能改进，然而，我不知道如何启用它
您可以通过提供Dart环境常量在Flutter Web中启用CanvasKit/Skia：
flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true
flutter工具现在有一个很好的快捷方式：
flutter run -d chrome --web-renderer canvaskit
--dart-define=FLUTTER_WEB_USE_SKIA=true参数将设置使用Skia的常量。您还需要将其提供给flutter build web:
flutter build web --web-renderer canvaskit
了解有关Flutter中web渲染器的更多信息。
选项
--web-renderer有三个选项：
auto (default)-自动选择要使用的渲染器。当应用程序在移动浏览器中运行时，此选项选择HTML渲染器，当应用程序运行在桌面浏览器中时，选择CanvasKit渲染器html-始终使用HTML呈现器canvaskit-始终使用CanvasKit渲染器
请参阅选择要使用的选项来决定应该使用哪个选项。
备选方案
我上面描述的内容可以在flutter/engine/initialization.dart文件中找到。请确保检查master分支以查看信息是否仍然是最新的。
在那里，您可以看到配置Flutter Web以使用CanvasKit的其他选项：
FLUTTER_WEB_AUTO_DETECT
--dart-define=FLUTTER_WEB_AUTO_DETECT=true
现在也可以使用：
--web-renderer auto
提供此常量将启用渲染器检测的自动检测：
- CanvasKit将在桌面设备上使用
- HTML将在移动设备上使用
只有在未指定window.flutterWebRenderer的情况下，此选项才成立。
window.flutterWebRenderer如果启用了自动检测(见上文(，则可以在JavaScript代码/HTML文件中动态指定渲染器：
...
<script>
// This sets the Flutter web renderer in auto detect mode.
// See https://stackoverflow.com/a/64583462/6509751.
window.flutterWebRenderer = 'canvaskit';
</script>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
var serviceWorkerVersion = null;
...
摘要
在发现自动检测PR后，我真的很感激下面对那里现状的总结：
如果启用了自动检测(由环境变量
FLUTTER_WEB_AUTO_DETECT设置(，则允许开发人员将window.flutterWebRender设置为canvaskit或html以选择渲染后端。如果未设置window.flutterWebRender，flutter引擎将使用canvaskit作为桌面设备，而使用html作为移动设备。如果window.flutterWebRender设置为无效值(既不是canvaskit也不是html(，则默认为html。如果自动检测被禁用，它将检查环境变量
FLUTTER_WEB_USE_SKIA的值。如果为true，请使用canvaksit。否则，请使用html。
如Web渲染器文档中所述，这些是在canvaskit模式下构建/运行Web的有效命令：
flutter build web --web-renderer canvaskit
flutter run -d chrome --web-renderer canvaskit
--web渲染器命令行选项采用三个值之一，auto、html或canvaskit。
auto(默认(-自动选择要使用的渲染器。当应用程序在移动浏览器中运行时，此选项选择HTML渲染器，当应用程序运行在桌面浏览器中时，选择CanvasKit渲染器html-始终使用HTML呈现器canvaskit-始终使用CanvasKit渲染器
本地运行
带滑雪板
flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release
带帆布套件
flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_URL=true --release
flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_FORCE_CPU_ONLY=true --release
您也可以在运行时强制执行将其添加到web/index.html:中
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: async function(engineInitializer) {
// Configure the engine options
let engineOptions = new _flutter.JsFlutterConfiguration();
engineOptions.renderer = "canvaskit";
// Initialize the Flutter engine
let appRunner = await engineInitializer.initializeEngine(engineOptions);
// Run the app
await appRunner.runApp();
}
});
});
以下是web渲染器和自定义web应用程序初始化的文档。