FlutterWeb实战：02-加载体验优化

背景

默认情况下，Flutter 打包 web 以后，首次打开页面需要加载大量的资源，这就需要做首屏加载优化。

渲染引擎

通过分析，canvaskit 和 skwasm 需要加载较大的引擎包，很难优化，目前选择 3.22 版本，故选择 HTML Render 引擎

Flutter Web 计划在 2025 开始弃用 HTML Render。如果是 2025 年的新版本，可以考虑使用 skwasm 引擎。

字体图标裁剪

体积裁剪，通过 bulid apk shaking icon，得到一个裁剪后的字体库，替换调 Flutter Web 打包的对应字体产物

先在 App 项目构建 apk：

flutter build apk --tree-shake-icons

找到 build/host/intermediates/assets/release/mergeReleaseAssets/flutter_assets/fonts/MaterialIcons-Regular.otf
将该文档复制到 web/fonts/ 文件夹

文件采样	压缩前	压缩后	压缩率
MaterialIcons-Regular.otf	1.5M	2k	1%

延迟加载

使用延迟加载拆分文件，当前页面不需要的使用的代码延迟加载

Dart 中提供了 defered 关键词，用于延迟加载组件。

参考下方实现一个 DeferredWidget 组件

import 'dart:async';
import 'package:ealing_widget/common/common_color.dart';
import 'package:flutter/material.dart';

typedef LibraryLoader = Future<void> Function();
typedef DeferredWidgetBuilder = Widget Function();

///延迟加载组件
class DeferredWidget extends StatefulWidget {
   
  DeferredWidget(this.libraryLoader, this.createWidget, {
   Key? key, Widget? placeholder}) : placeholder = placeholder ?? Container(color: CommonColors.color_widget_background), super(key: key);

  final LibraryLoader libraryLoader;
  final DeferredWidgetBuilder createWidget;
  final Widget placeholder;
  // 存储 libraryLoader 对应的 future 数据
  static final Map<LibraryLoader, Future<void>> _moduleLoaders = {