Skip to main content

延迟组件

简介

#

Flutter 能够构建可在运行时下载额外 Dart 代码和资源的应用。这允许应用减小安装 apk 大小,并在用户需要时下载功能和资源。

我们将 Dart 库和资源的每个可单独下载的包称为“延迟组件”。要加载这些组件,请使用Dart 的延迟导入。它们可以编译成拆分的 AOT 和 JavaScript 共享库。

尽管您可以延迟加载模块,但您必须构建整个应用并将其作为一个单独的Android 应用包*.aab)上传。Flutter 不支持分发部分更新,而无需为整个应用程序重新上传新的 Android 应用包。

当您在发布或概要模式下编译应用时,Flutter 会执行延迟加载。调试模式将所有延迟组件视为常规导入。这些组件在启动时存在并立即加载。这允许调试版本进行热重载。

要深入了解此功能的工作原理的技术细节,请参阅Flutter wiki上的延迟组件

如何为延迟组件设置项目

#

以下说明解释了如何为您的 Android 应用设置延迟加载。

步骤 1:依赖项和初始项目设置

#
  1. 将 Play Core 添加到 Android 应用的 build.gradle 依赖项中。在 android/app/build.gradle 中添加以下内容:

    groovy
    ...
    dependencies {
      ...
      implementation "com.google.android.play:core:1.8.0"
      ...
    }
  2. 如果使用 Google Play 商店作为动态特性的分发模型,则应用必须支持 SplitCompat 并提供 PlayStoreDeferredComponentManager 的实例。这两项任务都可以通过在 android/app/src/main/AndroidManifest.xml 中将应用程序的 android:name 属性设置为 io.flutter.embedding.android.FlutterPlayStoreSplitApplication 来完成:

    xml
    <manifest ...
      <application
         android:name="io.flutter.embedding.android.FlutterPlayStoreSplitApplication"
            ...
      </application>
    </manifest>

    io.flutter.app.FlutterPlayStoreSplitApplication 为您处理这两项任务。如果您使用 FlutterPlayStoreSplitApplication,则可以跳到步骤 1.3。

    如果您的 Android 应用程序很大或很复杂,您可能需要分别支持 SplitCompat 并手动提供 PlayStoreDynamicFeatureManager

    要支持 SplitCompat,有三种方法(如Android 文档 中所述),任何一种方法都有效:

    • 使您的应用程序类扩展 SplitCompatApplication

      java
      public class MyApplication extends SplitCompatApplication {
          ...
      }
    • attachBaseContext() 方法中调用 SplitCompat.install(this);

      java
      @Override
      protected void attachBaseContext(Context base) {
          super.attachBaseContext(base);
          // 模拟使用 SplitCompat 安装未来的按需模块。
          SplitCompat.install(this);
      }
    • SplitCompatApplication 声明为应用程序子类,并将 FlutterApplication 中的 Flutter 兼容性代码添加到您的应用程序类:

      xml
      <application
          ...
          android:name="com.google.android.play.core.splitcompat.SplitCompatApplication">
      </application>

    嵌入器依赖于注入的 DeferredComponentManager 实例来处理延迟组件的安装请求。通过将以下代码添加到您的应用初始化中,将 PlayStoreDeferredComponentManager 提供给 Flutter 嵌入器:

    java
    import io.flutter.embedding.engine.dynamicfeatures.PlayStoreDeferredComponentManager;
    import io.flutter.FlutterInjector;
    ... 
    PlayStoreDeferredComponentManager deferredComponentManager = new
      PlayStoreDeferredComponentManager(this, null);
    FlutterInjector.setInstance(new FlutterInjector.Builder()
        .setDeferredComponentManager(deferredComponentManager).build());
  3. 通过将 deferred-components 条目添加到应用的 pubspec.yaml 中的 flutter 条目下,选择加入延迟组件:

    yaml
    ...
    flutter:
      ...
      deferred-components:
      ...

    flutter 工具会在 pubspec.yaml 中查找 deferred-components 条目,以确定应用是否应作为延迟组件构建。除非您已经知道所需的组件和每个组件中包含的 Dart 延迟库,否则现在可以将其留空。您将在步骤 3.3中,gen_snapshot 生成加载单元后,填写此部分。

步骤 2:实现延迟 Dart 库

#

接下来,在应用的 Dart 代码中实现延迟加载的 Dart 库。实现不需要完全具备功能。本页其余部分中的示例添加了一个新的简单延迟小部件作为占位符。您还可以通过修改导入并在 loadLibrary() Future 后面保护延迟代码的使用来将现有代码转换为延迟代码。

  1. 创建一个新的 Dart 库。例如,创建一个新的 DeferredBox 小部件,该小部件可以在运行时下载。此小部件可以具有任何复杂性,但出于本指南的目的,创建一个简单的框作为替代。要创建一个简单的蓝色框小部件,请创建 box.dart,其内容如下:

    box.dart
    dart
    import 'package:flutter/material.dart';
    
    /// 一个简单的 30x30 蓝色方块。
    class DeferredBox extends StatelessWidget {
      const DeferredBox({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 30,
          width: 30,
          color: Colors.blue,
        );
      }
    }
  2. 在您的应用中使用 deferred 关键字导入新的 Dart 库,并调用 loadLibrary()(参见延迟加载库)。以下示例使用 FutureBuilder 来等待 loadLibrary Future(在 initState 中创建)完成,并显示 CircularProgressIndicator 作为占位符。当 Future 完成时,它会返回 DeferredBox 小部件。然后可以在应用中像往常一样使用 SomeWidget,并且在成功加载之前永远不会尝试访问延迟的 Dart 代码。

    dart
    import 'package:flutter/material.dart';
    import 'box.dart' deferred as box;
    
    class SomeWidget extends StatefulWidget {
      const SomeWidget({super.key});
    
      @override
      State<SomeWidget> createState() => _SomeWidgetState();
    }
    
    class _SomeWidgetState extends State<SomeWidget> {
      late Future<void> _libraryFuture;
    
      @override
      void initState() {
        super.initState();
        _libraryFuture = box.loadLibrary();
      }
    
      @override
      Widget build(BuildContext context) {
        return FutureBuilder<void>(
          future: _libraryFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              }
              return box.DeferredBox();
            }
            return const CircularProgressIndicator();
          },
        );
      }
    }

    loadLibrary() 函数返回一个 Future<void>,当库中的代码可供使用时,它会成功完成,否则会完成并出现错误。对延迟库中符号的所有使用都应在已完成的 loadLibrary() 调用后进行保护。所有库的导入都必须标记为 deferred,以便将其适当地编译为延迟组件中使用的组件。如果组件已加载,则对 loadLibrary() 的额外调用会快速完成(但不是同步的)。也可以提前调用 loadLibrary() 函数来触发预加载,以帮助掩盖加载时间。

    您可以在Flutter Gallery 的 lib/deferred_widget.dart中找到另一个延迟导入加载示例。

步骤 3:构建应用

#

使用以下 flutter 命令构建延迟组件应用:

flutter build appbundle

此命令通过验证您的项目是否已正确设置为构建延迟组件应用来为您提供帮助。默认情况下,如果验证器检测到任何问题,则构建会失败,并指导您进行建议的更改以修复这些问题。

  1. flutter build appbundle 命令运行验证器并尝试使用 gen_snapshot 构建应用程序,该命令指示生成拆分的 AOT 共享库作为单独的 .so 文件。在第一次运行时,验证器可能会失败,因为它检测到问题;该工具会推荐如何设置项目以及如何修复这些问题。

    验证器分为两个部分:预构建和后 gen_snapshot 验证。这是因为在 gen_snapshot 完成并生成最终的加载单元集之前,无法执行任何引用加载单元的验证。

    验证器检测 gen_snapshot 生成的任何新的、更改的或删除的加载单元。当前生成的加载单元在您的 <projectDirectory>/deferred_components_loading_units.yaml 文件中进行跟踪。应将此文件检入源代码控制,以确保可以捕获其他开发人员对加载单元所做的更改。

    验证器还会检查 android 目录中的以下内容:

    • <projectDir>/android/app/src/main/res/values/strings.xml
      为每个延迟组件输入一个条目,将键 ${componentName}Name 映射到 ${componentName}。此字符串资源由每个功能模块的 AndroidManifest.xml 用于定义 dist:title 属性。例如:

      xml
      <?xml version="1.0" encoding="utf-8"?>
      <resources>
        ...
        <string name="boxComponentName">boxComponent</string>
      </resources>
    • <projectDir>/android/<componentName>
      每个延迟组件都存在一个 Android 动态功能模块,其中包含 build.gradlesrc/main/AndroidManifest.xml 文件。这只会检查是否存在,而不会验证这些文件的内容。如果文件不存在,则会生成一个默认的推荐文件。

    • <projectDir>/android/app/src/main/res/values/AndroidManifest.xml
      包含一个元数据条目,该条目编码

      加载单元与其关联的组件名称之间的映射。嵌入器使用此映射将 Dart 的内部加载单元 ID 转换为要安装的延迟组件的名称。例如:

      xml
      ...
      <application
          android:label="MyApp"
          android:name="io.flutter.app.FlutterPlayStoreSplitApplication"
          android:icon="@mipmap/ic_launcher">
          ...
          <meta-data android:name="io.flutter.embedding.engine.deferredcomponents.DeferredComponentManager.loadingUnitMapping" android:value="2:boxComponent"/>
      </application>
      ...

    预构建验证器通过后,gen_snapshot 验证器才会运行。

  2. 对于这些检查中的每一个,工具都会生成通过检查所需的修改后的或新的文件。这些文件放置在 <projectDir>/build/android_deferred_components_setup_files 目录中。建议通过复制和覆盖项目 android 目录中的相同文件来应用这些更改。在覆盖之前,应将当前项目状态提交到源代码控制,并应检查推荐的更改是否合适。工具不会自动更改您的 android/ 目录。

  3. 一旦生成并记录了 <projectDirectory>/deferred_components_loading_units.yaml 中的可用加载单元,就可以完全配置 pubspecdeferred-components 部分,以便根据需要将加载单元分配给延迟组件。要继续使用 box 示例,生成的 deferred_components_loading_units.yaml 文件将包含:

    yaml
    loading-units:
      - id: 2
        libraries:
          - package:MyAppName/box.Dart

    加载单元 ID(在本例中为“2”)由 Dart 在内部使用,可以忽略。基加载单元(ID“1”)未列出,其中包含未明确包含在另一个加载单元中的所有内容。

    您现在可以将以下内容添加到 pubspec.yaml

    yaml
    ...
    flutter:
      ...
      deferred-components:
        - name: boxComponent
          libraries:
            - package:MyAppName/box.Dart
      ...

    要将加载单元分配给延迟组件,请将加载单元中的任何 Dart 库添加到功能模块的 libraries 部分。请记住以下准则:

    • 加载单元不应包含在多个组件中。

    • 包含来自加载单元的一个 Dart 库表示整个加载单元已分配给延迟组件。

    • 所有未分配给延迟组件的加载单元都包含在基组件中,基组件始终隐式存在。

    • 分配给同一延迟组件的加载单元将一起下载、安装和交付。

    • 基组件是隐式的,无需在 pubspec 中定义。

  4. 还可以通过在延迟组件配置中添加 assets 部分来包含资产:

    yaml
      deferred-components:
        - name: boxComponent
          libraries:
            - package:MyAppName/box.Dart
          assets:
            - assets/image.jpg
            - assets/picture.png
              # 通配符目录
            - assets/gallery/

    一个资产可以包含在多个延迟组件中,但安装两个组件会导致资产被复制。也可以通过省略 libraries 部分来定义仅包含资产的组件。这些仅包含资产的组件必须使用 services 中的 DeferredComponent 实用程序类进行安装,而不是 loadLibrary()。由于 Dart 库与资产一起打包,如果使用 loadLibrary() 加载 Dart 库,则也会加载组件中的任何资产。但是,按组件名称和 services 实用程序进行安装不会加载组件中的任何 Dart 库。

    您可以随意将资产包含在任何组件中,只要在第一次引用它们时安装和加载它们即可,尽管通常情况下,最好将资产及其使用的 Dart 代码打包在同一个组件中。

  5. 手动将您在 pubspec.yaml 中定义的所有延迟组件作为包含项添加到 android/settings.gradle 文件中。例如,如果 pubspec 中定义了三个名为 boxComponentcircleComponentassetComponent 的延迟组件,请确保 android/settings.gradle 包含以下内容:

    groovy
    include ':app', ':boxComponent', ':circleComponent', ':assetComponent'
    ...
  6. 重复步骤 3.1 到 3.6(此步骤),直到处理所有验证器建议并且工具在没有进一步建议的情况下运行。

    成功后,此命令会在 build/app/outputs/bundle/release 中输出一个 app-release.aab 文件。

    成功的构建并不总是意味着应用按预期构建。您有责任确保所有加载单元和 Dart 库都按您的意图包含在内。例如,一个常见的错误是意外地导入没有 deferred 关键字的 Dart 库,导致延迟库作为基加载单元的一部分进行编译。在这种情况下,Dart 库会正确加载,因为它始终存在于基库中,并且库不会被分离。可以通过检查 deferred_components_loading_units.yaml 文件来验证生成的加载单元是否按预期描述来检查这一点。

    调整延迟组件配置或进行添加、修改或删除加载单元的 Dart 更改时,您应该预计验证器会失败。按照步骤 3.1 到 3.6(此步骤)应用任何建议的更改以继续构建。

在本地运行应用

#

应用成功构建 .aab 文件后,使用 Android 的 bundletool 使用 --local-testing 标志执行本地测试。

要在测试设备上运行 .aab 文件,请从 github.com/google/bundletool/releases 下载 bundletool jar 可执行文件并运行:

java -jar bundletool.jar build-apks --bundle=<your_app_project_dir>/build/app/outputs/bundle/release/app-release.aab --output=<your_temp_dir>/app.apks --local-testing

java -jar bundletool.jar install-apks --apks=<your_temp_dir>/app.apks

其中 <your_app_project_dir> 是应用项目目录的路径,<your_temp_dir> 是用于存储 bundletool 输出的任何临时目录。这会将您的 .aab 文件解包到 .apks 文件中,并将其安装在设备上。所有可用的 Android 动态特性都加载到设备本地,并模拟延迟组件的安装。

在再次运行 build-apks 之前,请删除现有的 app .apks 文件:

rm <your_temp_dir>/app.apks

对 Dart 代码库的更改需要增加 Android 构建 ID 或卸载并重新安装应用,因为除非检测到新的版本号,否则 Android 不会更新功能模块。

发布到 Google Play 商店

#

构建的 .aab 文件可以像往常一样直接上传到 Play 商店。当调用 loadLibrary() 时,Flutter 引擎将使用 Play 商店的交付功能下载包含 Dart AOT 库和资产的所需 Android 模块。