Flutter for Web 首次首屏优化——JS 分片优化

摘要

Flutter for Web（FFW）从 2021 年发布至今，在国内外互联网公司已经得到较多的应用。作为 Flutter 技术在 Web 领域的有力扩充，FFW 可以让熟悉 Flutter 的客户端同学直接上手写 H5，复用 App 端代码高效支撑业务需求；在 App 侧 FFW 也可作为 Flutter 动态下发的兜底方案。总的来说在业务和技术上 FFW 都具有相当的价值。

然而在使用 FFW 时有一个明显的问题：其编译产物 main.dart.js 较大，初始的 Hello world 工程编译后产物 js 大小为 1.2 MB，添加业务代码后 js 的大小还会继续增加。在阿里卖家的内容外投业务中，3 个页面的工程 js 大小为 2.0 MB，js 文件过大直接的影响就是页面首次首屏加载的速度。针对 js 的大小有较多优化方法，本文主要记录 main.dart.js 分片优化方案的实现。