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 文件体积也会变小很多。
字体
如果项目当中没有自定义字体，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?，有兴趣可以了解一下。同时如果有疑问或者有更好的解决方案欢迎与我一起讨论。
