Flutter Web 优化实践

2021-10-02

flutter

Flutter 2.0 提供了全平台构建应用支持(iOS, Android, Windows, macOS, Linux, 嵌入式), 当然也包括 Web 的稳定版。

Flutter Web 整体的体验上还不错，但依然还有很多需要完善的地方，在实际项目实践中发现以下问题:

SEO 不友好。搜索引擎无法收录，网页没办法获取自然流量。
包体积过大。main.dart.js 单个 js 文件没有拆包且整体包体积过大,导致网页加载速度慢。
页面没有缓存首次加载，canvaskit 下载时间过长。如果使用 canvaskit 方式来渲染 web 需要额外加载 2.5MB 左右的 canvaskit.wasm。
白屏用户体验差。由于网页加载过慢，官方尚未提供相应加载指示器或 API 来控制页面加载状态。

主要问题就是整体包体积过大导致首次无缓存情况下页面加载很慢。整体的思路主要围绕优化体积，代码懒加载，增加加载指示器等方面来提升页面加载时的用户体验。

优化包体积

main.dart.js

默认情况下 Flutter Web 会将所有 Dart 代码全部转译为一个 JS 文件即 main.dart.js。这样会导致包体积很大。我们可以使用延迟加载的方式进行按需加载, 比如在跳转某一个页面的时候再对该页面的代码进行加载。

Dart 当中提供了 deferred 关键字来进行延时加载。具体使用方式可以查看官方文档。

同时 Gallery 项目中对 deferred 进行了封装处理，我对该 Widget 进行简化可以直接拿来参考使用。

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 = {};
  // 存储已经预加载过了的 libraryLoader
  static final Set<LibraryLoader> _loadedModules = {};

  static Future<void>? preload(LibraryLoader loader) {
    if (!_moduleLoaders.containsKey(loader)) {
      _moduleLoaders[loader] = loader().then((dynamic _) {
        _loadedModules.add(loader);
      });
    }
    return _moduleLoaders[loader];
  }

  @override
  _DeferredWidgetState createState() => _DeferredWidgetState();
}

class _DeferredWidgetState extends State<DeferredWidget> {
  Widget? _loadedChild;

  @override
  void initState() {
    if (DeferredWidget._loadedModules.contains(widget.libraryLoader)) {
      _onLibraryLoaded();
    } else {
      DeferredWidget.preload(widget.libraryLoader)
          ?.then((dynamic _) => _onLibraryLoaded());
    }
    super.initState();
  }

  void _onLibraryLoaded() {
    setState(() {
      _loadedChild = widget.createWidget();
    });
  }

  @override
  Widget build(BuildContext context) {
    return _loadedChild ?? widget.placeholder;
  }
}

经过 deferred 处理最后生成的 JS 文件就会被拆分很多个，主体 main.dart.js 文件体积也会变小很多。

js 文件

字体

如果项目当中没有自定义字体，Flutter 默认会打包 MaterialIcons-Regular.otf 和 CupertinoIcons.ttf 这两种字体库。

这两种字体是包含了一些预置的 Material 和 iOS 设计风格 icon，所有体积较大，如果项目当中没有用到相关的 icon，我们可以对这些字体库进行简化。

从 material-design-icons 中下载 MaterialIcons-Regular.ttf 字体库。
在 Web 产物中, 将 MaterialIcons-Regular.ttf 原有的 ./build/web/assets/fonts/MaterialIcons-Regular.otf 字体库。
可以将 build/web/assets/packages/cupertino_icons/assets/CupertinoIcons.ttf 的字体库删除。
修改build/web/assets/FontManifest.json 中字体的相关配置。需要修改字体格式以及去除不用字体的引用路径。

以上操作可以通过编写脚本方式在生成 Web 产物之后进行修改。

canvaskit.wasm

canvaskit.wasm 问题在于要加载额外的 2.5 MB左右的库，拖慢了网页的加载速度。目前有两种解决方案:

将渲染方式改为 html。但实际上使用 canvaskit 这种渲染方式是比较贴近原生的使用体验的。
更换 canvaskit.wasm CDN 地址。推荐一个对开源文件免费的 CDN：jsdelivr 。接着在执行 flutter build web 生成产物的时候需要增加参数 --dart-define=FLUTTER_WEB_CANVASKIT_URL 来修改 Flutter 预设的地址。例如:
flutter build web --release --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.25.1/bin/

gzip

服务端开启 gzip 之后，拉取压缩过的资源速度会更快一些。

Loading

在 index.html 里面放一张图片并设置相应的样式，等程序进入主入口渲染第一帧或者在合适的时机把该元素移除即可。贴一些相关代码供参考。

<!-- index.html -->
<div id="loading">
  <style>
    html, body {
      width: 100%;
      height: 100%;
    }
    #loading {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: white;
    }
    #loading img {
      width: 150px;
      height: 150px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -75px;
      margin-top: -75px;
    }
  </style>
  <img src="loading.gif">
</div>

在合适的时机移除该 <img> 元素。

if(kIsWeb){
      var loadingElement = html.document.getElementById("loading");
      loadingElement?.remove();     
}

最后

Flutter Web 稳定版刚出来还需要一些时间来完善这些问题，Flutter 团队也给出了后续需要着重要优化的点 Flutter: What’s next on the Web?，有兴趣可以了解一下。同时如果有疑问或者有更好的解决方案欢迎与我一起讨论。