TikTok 採用 Jetpack Compose 後，程式碼大小減少 58%，新功能的應用程式效能也獲得提升

TikTok 是全球短影音平台，以龐大的使用者族群和創新功能聞名。團隊會持續為使用者推出更新、實驗和新功能。TikTok Android 團隊面臨的挑戰是，在管理技術債的同時，還要維持開發速度，因此他們決定採用 Jetpack Compose。

該團隊希望更快、更有效地疊代產品需求。團隊希望透過 Compose 減少程式碼編寫量和認知負荷，進而提升工程效率，同時提高效能和穩定性。

簡化複雜的使用者介面，提高開發人員工作效率

TikTok 頁面通常比表面上看起來更複雜，包含許多分層條件。這種複雜性往往導致檢視區塊階層難以維護、結構不佳，以及過度巢狀結構，進而增加測量次數，導致效能降低。

Compose 為這個結構性問題提供了直接的解決方案。

此外，Compose 的測量策略有助於減少重複徵稅，讓測量效能更容易最佳化。

為提高開發人員的工作效率，TikTok 的中央設計系統團隊為負責不同應用程式功能的團隊提供元件庫。該團隊發現，使用 Compose 開發相當簡單，運用小型可組合函式非常有效，而整合大型 UI 區塊與條件邏輯不僅簡單，而且負擔極小。

透過策略性遷移開拓新局

TikTok 策略性地採用 Jetpack Compose，不僅能有效處理技術債，還能繼續專注於為使用者打造優質體驗。Compose 能夠妥善處理條件邏輯並簡化組合結構，讓團隊在新頁面或完全重寫的頁面上，將網頁載入時間縮短高達 78%。 在較小的案例中，這項改善幅度為 20% 至 30%，而對於完整重寫和新功能，則為 70% 至 80%。相較於使用 View 建構的相同功能，他們還能將程式碼大小縮減 58%。團隊也分享了幾項心得：

TikTok 團隊的整體策略是逐步遷移特定使用者歷程。這讓他們有機會遷移、確認可衡量的效益，然後擴展到更多螢幕。他們一開始使用 Compose 簡化 QR code 功能的整體結構，並看到成效。團隊後來將遷移範圍擴大至登入和註冊體驗。

團隊也分享了其他心得：

TikTok 團隊在遷移期間檢查效能時，發現使用多個小型 ComposeView 取代單一 ViewHolder 中的元素，會導致組合負擔。他們擴大遷移範圍，在整個 ViewHolder 中使用單一 ComposeView，進而取得更出色的成果。

在 ViewPager 中遷移 Fragment 時，如果 Fragment 具有自訂高度邏輯和條件邏輯，可根據實驗隱藏及顯示 UI，則效能不會受到影響。在這種情況下，將 ViewPager 遷移至可組合項的效果，會比遷移 Fragment 更好。

Jun Shen 非常喜歡 Compose，因為它「減少了功能開發所需的程式碼數量、提高可測試性，並加快推送速度」。該團隊計劃逐步提高 Compose 採用率，並將其做為長期首選架構。Jetpack Compose 經證實是強大的解決方案，可大規模改善開發人員體驗和實際工作環境指標。

開始使用 Jetpack Compose

進一步瞭解 Jetpack Compose  如何協助團隊。