👁️ - 次

flutter web 如何确保用户收到更新

编程 

flutter doctor -v
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
[√] Flutter (Channel stable, 3.41.4, on Microsoft Windows [版本 10.0.26200.8039], locale zh-CN) [796ms]
    • Flutter version 3.41.4 on channel stable at D:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ff37bef603 (3 weeks ago), 2026-03-03 16:03:22 -0800
    • Engine revision e4b8dca3f1
    • Dart version 3.11.1
    • DevTools version 2.54.1
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android,
      enable-ios, cli-animations, enable-native-assets, omit-legacy-version-file, enable-lldb-debugging,
      enable-uiscene-migration

在老的版本中，flutter web 依靠文件哈希的方式控制版本更新，只要发现哈希不同，就会拉取最新的 js 文件。但最近这种方式已经被淘汰，main.dart.js 文件不再以有哈希后缀。

因此，用户端无法判断 main.dart.js 的版本。在开启缓存的情况下，用户可以无法更新到最新版本。直到缓存到期或者检测到 etag 不同。而 main.dart.js 非常大，如果频繁下载会非常影响用户体验。

想要控制 main.dart.js 版本的最简单方式就在拉取时补充版本信息，类似于 main.dart.js?version=1.2.3。那么要如何做到这一点呢？

如果你问 ai，他可能会告诉你，要修改 web/flutter_bootstrap.js 的 loadEntrypoint 方法的 entrypointUrl 参数：

entrypointUrl: '/main.dart.js?version=1.2.3',

但实际上这个参数已经过期了，顺带说一句，loadEntrypoint 方法也已经过期了。老的教程使用这个函数去自定义 flutter web 初始化。

  /**
   * @deprecated
   * Loads flutter main entrypoint, specified by `entrypointUrl`, and calls a
   * user-specified `onEntrypointLoaded` callback with an EngineInitializer
   * object when it's done.
   *
   * @param {*} options
   * @returns {Promise | undefined} that will eventually resolve with an
   * EngineInitializer, or will be rejected with the error caused by the loader.
   * Returns undefined when an `onEntrypointLoaded` callback is supplied in `options`.
   */
  async loadEntrypoint(options) {
    const { entrypointUrl = resolveUrlWithSegments("main.dart.js"), onEntrypointLoaded, nonce } =
      options || {};
    return this._loadJSEntrypoint(entrypointUrl, onEntrypointLoaded, nonce);
  }

当前版本，flutter web 使用 _flutter.loader.load 方法去初始化。然而，新的方法并没有类似 entrypointUrl 用法的参数（注意不要和 entrypointBaseUrl 搞混）。

但可以看到，flutter 实际拉取 main.dart.js 的逻辑是这样的：

      const mainPath = build.mainJsPath ?? "main.dart.js";
      const entrypointUrl = resolveUrlWithSegments(entrypointBaseUrl, mainPath);
      return this._loadJSEntrypoint(entrypointUrl, onEntrypointLoaded, nonce);

我们只需要在 web/flutter_bootstrap 中自己去更改 build.mainJsPath 的值就好：

_flutter.buildConfig.builds[0].mainJsPath = 'main.dart.js?version=1.2.3';

那么如何自动更改这个版本号呢？其实 flutter web 自带了一些模板代码的设置，首先将上面的代码改为：

_flutter.buildConfig.builds[0].mainJsPath = 'main.dart.js?version={{version}}';

将打包代码改为：

flutter build web --web-define=version=1.2.3

{{version}} 就会自动被替换为实际的版本号。

tip