美文网首页
Flutter Web 优化实践

Flutter Web 优化实践

作者: 关于岚 | 来源:发表于2021-10-19 19:45 被阅读0次
    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 文件体积也会变小很多。

    image.png

    字体

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

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

    1. material-design-icons 中下载 MaterialIcons-Regular.ttf 字体库。

    2. 在 Web 产物中, 将 MaterialIcons-Regular.ttf 原有的 ./build/web/assets/fonts/MaterialIcons-Regular.otf 字体库。

    3. 可以将 build/web/assets/packages/cupertino_icons/assets/CupertinoIcons.ttf 的字体库删除。

    4. 修改build/web/assets/FontManifest.json 中字体的相关配置。需要修改字体格式以及去除不用字体的引用路径。

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

    canvaskit.wasm

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

    1. 将渲染方式改为 html。 但实际上使用 canvaskit 这种渲染方式是比较贴近原生的使用体验的。

    2. 更换 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?,有兴趣可以了解一下。同时如果有疑问或者有更好的解决方案欢迎与我一起讨论。

    相关文章

      网友评论

          本文标题:Flutter Web 优化实践

          本文链接:https://www.haomeiwen.com/subject/fovgdltx.html