FlutterWeb性能優(yōu)化探索與實(shí)踐

點(diǎn)擊“開(kāi)發(fā)者技術(shù)前線”，選擇“星標(biāo)”
讓一部分開(kāi)發(fā)者看到未來(lái)

來(lái)自：美團(tuán)技術(shù)團(tuán)隊(duì)

• 一、背景

• 1.1 關(guān)于FlutterWeb

• 1.2 業(yè)務(wù)現(xiàn)狀

• 二、挑戰(zhàn)

• 三、整體設(shè)計(jì)

• 四、設(shè)計(jì)與實(shí)踐

• 4.1 精簡(jiǎn) SDK

• 4.2 JS 分片

• 4.3 預(yù)加載方案

• 4.4 分平臺(tái)打包

• 4.5 圖標(biāo)字體精簡(jiǎn)

• 五、總結(jié)與展望

一、背景

1.1 關(guān)于FlutterWeb

1.2 業(yè)務(wù)現(xiàn)狀

二、挑戰(zhàn)

1. Framework、Flutter_Web_SDK（Flutter_Web_SDK 基于 HTML、Canvas，承載 HTML Render 模式的具體實(shí)現(xiàn)）等底層 SDK 是可被業(yè)務(wù)代碼直接引入的，幫助我們快速開(kāi)發(fā)出跨端應(yīng)用；
2. flutter_tools 是各平臺(tái)（Android、iOS、Web）的編譯入口，它接收 flutter build web 命令和參數(shù)并開(kāi)始編譯流程，同時(shí)等待處理結(jié)果回調(diào)，在回調(diào)中我們可對(duì)編譯產(chǎn)物進(jìn)行二次加工；
3. frontend_server 負(fù)責(zé)將 Dart 轉(zhuǎn)換為 AST，生成 kernel 中間產(chǎn)物 app.dill 文件（實(shí)際上各平臺(tái)的編譯過(guò)程都會(huì)生成這樣的中間產(chǎn)物），并交由各平臺(tái) Compiler 進(jìn)行轉(zhuǎn)譯；
4. Dart2JS Compiler 是 Dart-SDK 中具體負(fù)責(zé)轉(zhuǎn)譯 JS 的模塊，它將上述中間產(chǎn)物 app.dill 進(jìn)行讀取和解析，并注入 Math、List、Map 等 JS 工具方法，最終生產(chǎn)出 Web 平臺(tái)所能執(zhí)行的 JS 文件。
5. 編譯產(chǎn)物主要為 main.dart.js、index.html、images 等靜態(tài)資源，F(xiàn)lutterWeb 對(duì)這些靜態(tài)資源缺少常規(guī) Web 項(xiàng)目中的優(yōu)化手段，例如：文件 Hash 化、文件分片、CDN 支持等。

三、整體設(shè)計(jì)

• SDK 瘦身：我們分別對(duì) FlutterWeb 所依賴(lài)的 Dart-SDK、Framework、Flutter_Web_SDK 進(jìn)行了瘦身，并將這些精簡(jiǎn)版 SDK 集成合入 CI/CD（持續(xù)集成與部署）系統(tǒng)，為減小產(chǎn)物包體積奠定了基礎(chǔ)；
• 編譯優(yōu)化：此外，我們?cè)?flutter_tools 中的編譯流程做了干預(yù)，分別進(jìn)行了 JS 文件分片、靜態(tài)資源 Hash 化、資源文件上傳 CDN 等優(yōu)化，使得這些在常規(guī) Web 應(yīng)用中基礎(chǔ)的性能優(yōu)化手段得以在 FlutterWeb 中落地。同時(shí)加強(qiáng)了 FlutterWeb 特殊場(chǎng)景下的資源優(yōu)化，如：字體圖標(biāo)精簡(jiǎn)、Runtime Manifest 隔離、Mobile/PC 分平臺(tái)打包等；
• 加載優(yōu)化：在編譯階段進(jìn)行靜態(tài)資源優(yōu)化后，我們?cè)谇岸诉\(yùn)行時(shí)，支持了資源預(yù)加載與按需加載，通過(guò)設(shè)定合理的加載時(shí)機(jī)，從而減小初始代碼體積，提升頁(yè)面首屏的渲染速度。

四、設(shè)計(jì)與實(shí)踐

4.1 精簡(jiǎn) SDK

4.1.1 包體積分析

4.1.2 SDK 裁剪

//?FileName:?flutter/lib/src/rendering/editable.dart
void?_handleKeyEvent(RawKeyEvent?keyEvent)?{
??if?(kIsWeb)?{
????//?On?web?platform,?we?should?ignore?the?key.
????return;
??}
??//?Other?codes?...
}

4.1.3 SDK 集成 CI/CD

4.2 JS 分片

1. 功能無(wú)法及時(shí)更新：為了實(shí)現(xiàn)瀏覽器的緩存優(yōu)化，我們的項(xiàng)目開(kāi)啟了對(duì)靜態(tài)資源的強(qiáng)緩存，若 main.dart.js 產(chǎn)物不支持 Hash 命名，可能導(dǎo)致程序代碼不能被及時(shí)更新；
2. 無(wú)法使用 CDN：FlutterWeb 默認(rèn)僅支持相對(duì)域名的資源加載方式，無(wú)法使用當(dāng)前域名以外的 CDN 域名，導(dǎo)致無(wú)法享受 CDN 帶來(lái)的優(yōu)勢(shì)；
3. 首屏渲染性能不佳：雖然我們進(jìn)行了 SDK 瘦身，但 main.dart.js 文件依然維持在 0.7M 以上，單一文件加載、解析時(shí)間過(guò)長(zhǎng)，勢(shì)必會(huì)影響首屏的渲染時(shí)間。

4.2.1 Lazy Loading

//?使用方式
import?'pages/index/index.dart'?deferred?as?IndexPageDefer;
{
??'/index':?(context)?=>?FutureBuilder(
????future:?IndexPageDefer.loadLibrary(),
????builder:?(context,?snapshot)?=>?IndexPageDefer.Demo(),
??)
??...?...
}

4.2.2 Runtime Manifest抽離

4.2.3 main.dart.js 切片

<b id="afajh"><abbr id="afajh"></abbr></b>