新版 Flutter Web使用 canvaskit 渲染元件.

會載入 canvaskit.js 和 canvaskit.wasm 這兩個檔案

在國內載入這兩個檔案很慢..

可以將這兩個檔案放到自己的伺服器,或其它高速伺服器.

在編譯的時候使用 --dart-define=FLUTTER_WEB_CANVASKIT_URL="http://****/" 指定自定義下載地址。

解決方法

Canvaskit是一個js框架，Flutter定義預設是從https://unpkg.com去載入的，在國內最好是改變這個地址，讓它通過映象地址去載入.

編譯釋出修改

在{SDK_PATH}/bin/cache/flutter_web_sdk/lib/_engine/engine/canvaskit/initialization.dart

/// The URL to use when downloading the CanvasKit script and associated wasm.
///
/// The expected directory structure nested under this URL is as follows:
///
///     /canvaskit.js              - the release build of CanvasKit JS API bindings
///     /canvaskit.wasm            - the release build of CanvasKit WASM module
 
///     /profiling/canvaskit.js    - the profile build of CanvasKit JS API bindings
///     /profiling/canvaskit.wasm  - the profile build of CanvasKit WASM module
///
/// The base URL can be overridden using the `FLUTTER_WEB_CANVASKIT_URL`
/// environment variable, which can be set in the Flutter tool using the
/// `--dart-define` option. The value must end with a `/`.
 
///
/// Example:
///
/// ```
/// flutter run \
///   -d chrome \
///   --web-renderer=canvaskit \
///   --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://example.com/custom-canvaskit-build/
/// ```
///
/// When CanvasKit pushes a new release to NPM, update this URL to reflect the
/// most recent version. For example, if CanvasKit releases version 0.34.0 to
/// NPM, update this URL to `https://unpkg.com/canvaskit-wasm@0.34.0/bin/`.
const String canvasKitBaseUrl = String.fromEnvironment(
  'FLUTTER_WEB_CANVASKIT_URL',
  defaultValue: 'https://unpkg.com/[email protected]/bin/',
);

意思是可以通過 FLUTTER_WEB_CANVASKIT_URL 這個環境變數改變預設的下載地址.
所以我們只要在 flutter 命令後面加上 --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.jsdelivr.net/npm/[email protected]/bin/ 就可以了

flutter run -d chrome --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.jsdelivr.net/npm/[email protected]/bin/ --release

idea as run可以新增額外引數