如何優化「快應用」rpk 包體積?

語言: CN / TW / HK

快應用 ,相當於是手機廠商聯合出品的 小程式 。如果您看過快應用系列文章,想必對如何高效開發快應用、如何利用快應用賺取稅後收入等,有了大致瞭解。因為 快應用 也是 即點即用 (大致經歷:下載 rpk ,解壓、校驗簽名、啟動等步驟),更小提及的 rpk 包,有助於 快應用 秒開率的提升,對於所獲取的體驗和利潤,也有更好的轉化。故而,今在此與朋友們,就「 如何優化「快應用」rpk 包體積 」,做下探討。

減小 rpk 體積的價值

快應用引擎,早在 2019 年 2 月 1040 版本,就新增了「支援 RPK 分包載入」的功能;在那之前,還上線了一個功能 ── 支援 rpk 流式下載,即無須等 rpk 檔案完全下載完成,在 app.js 下載成功後,就能開始執行(rpk 下載耗時埋點也就此終止)。這就是說,rpk 整體增加或減小 100KB,對 rpk 的下載,沒有絕對相關性;但對後續執行速度,卻是有一定影響。從大盤資料看(2021 年 8 月),建立應用時間(執行 app.js ),平均在 166ms,而 app.js 尺寸小於 100kb 的應用,其執行耗時遠小於平均值;但 rpk 尺寸大於 200kb 的應用,其執行耗時則高於平均值(200ms+)。由此,也能得出一個結論: 優化 rpk 體積(尤其是 app.js 及各頁面所構建的 js 資源),有助於提升快應用執行速度

RPK 體積優化建議

資源 CDN 化

您知道,無論是開發 Web 應用、小程式還是原生應用,用到圖片、圖示、字型,甚至是影片等資源,是必不可少的。但這些資源,除了 Logo 圖示外,其他的資源,最好可以放在雲端,通過 CDN 加速,在應用上,既可以快速得到載入和適用、也能方便隨時修改,還能極大促進 rpk 體積得到優化。

JavaScript 獨立打包

快應用 中,當不同頁面同時引入同一 JavaScript 資源時,預設情況下編譯工具會將該 JS 資原始碼打包至該頁面檔案中。由於打包後相關頁面檔案都包含了重複的 JS 程式碼,會造成最終打包生成的 rpk 包體積較大。

快應用平臺自 1080 版本起支援將 JS 資源獨立打包。當 app.ux 或頁面檔案兩次或以上引用到同一 JS 資源時,會將該 JavaScript 資源抽取到獨立的檔案中,使得相關檔案共用同一份 JS 程式碼,可有效減少整個 rpk 包體積。

抽取物件

所有被引用兩次或以上的 JS 資源均會被抽取至獨立檔案中,包括:

  • 普通 JS 檔案;
  • 子元件;
  • node_modules 中被引用的外部庫;

具體適用

基本上所有專案,都可使用;尤其對多頁面引入相同的 JS 資源,有著更明顯的優化效果。

IDE 配置

在專案根目錄新建配置檔案 quickapp.config.js ,並配置 cli 屬性,如下示例:

// quickapp.config.js
module.exports = {
  cli: {
    // 請注意,這裡的 SMART,須要是大寫;
    splitChunksMode: 'SMART'
  }
}

如果您習慣基於 命令列 構建,只需在 hap build 命令後,接入 --split-chunks-mode=smart 引數即可。

常用方法抽離

先前,在 如何優雅處理「快應用」資料請求如何優雅使用「快應用」API 等文章中,就有提及,無論是編寫 Web 應用、小程式、快應用,都可以嘗試將常用的方法抽離( help/utils.js ),在入口(快應用中是 app.ux )統一掛載到全域性,從而方便在各頁面、元件中使用,無需額外 import 操作,提升編碼效率。在 快應用 開發中,IDE 預設並未採取獨立打包模式,因此基於這種方式,則可以避免這類封裝的方法,在各面被重複構建(只會被構建於 app.js 檔案中)。

當然,如果您抽離了大量公共方法,統一在 app.ux ,或可能造成 app.js 體積增大,導致影響應用首屏執行時機和速度。除了開啟 JavaScript 獨立打包 外, 另一種可取方案,是將這個方案,與 1080 提出的 動態匯入 相結合。

動態匯入 1080+

基於 JS 獨立打包,開發者可使用 import() 動態匯入 的能力,詳見 快應用文件 動態匯入 部分。

抽取物件

所有被動態匯入的 JS 資源,均會被抽取至獨立檔案中。

具體適用

標準用法的 import 匯入的模組是靜態的,會使所有被匯入的 JavaScript, 在載入時就被編譯 。如果一個頁面依賴的 JavaScript 檔案很大,並且又 不是首次渲染所必須的 ,可以考慮以非同步的形式載入 JavaScript 檔案。

可以使用 import() 函式動態匯入 JavaScript 檔案,從而減少首次渲染時間。如果使用 import() 函式動態匯入 JavaScript 檔案,必須使用 JavaScript 獨立打包,將動態匯入的 JavaScript 資源抽取到獨立檔案。

使用 import() 方法動態匯入,示例如下:

<template>
  <div class="demo-page">
    <text class="title">{{count}}</text>
    <input class="btn" type="button" value="點選匯入動態 JS" onclick="onImportDynamicJs" />
  </div>
</template>

<script>
export default {
  private: {
    count: 100
  },

  onImportDynamicJs() {
    import('./dynamic-js').then(res => {
      console.log('已動態匯入 dynamic-js')
      this.count = res.calculate(this.count)
    })
  }
}
</script>

動態匯入 JavaScript 檔案:

// dynamic-js.js
const baseNum = 1314

export function calculate(param)  {
  return baseNum + param
}

IDE 配置

在專案根目錄新建配置檔案 quickapp.config.js ,並配置 cli 屬性,如下示例:

// quickapp.config.js
module.exports = {
  cli: {
    // 請注意,這裡的 SMART,須要是大寫;
    splitChunksMode: 'SMART'
  }
}

如果您習慣基於 命令列 構建,只需在 hap build 命令後,接入 --split-chunks-mode=smart 引數即可。

基於分包載入

當快應用體積較大時,可以使用 快應用 的分包載入功能。簡單來說,就是 將專案中的所有頁面及資源,通過配置規則劃分到多個單獨的分包檔案中,執行時單獨下載,加快頁面渲染

分包載入的能力,首先依賴於編譯時工具,根據開發者在 manifest.json 中配置的 subpackages 規則,將專案打包成多個分包。

這些分包包含一個基礎包和若干個分包,基礎包內容包含一些公共的資源、頁面等內容,而分包內容則是根據開發者的配置資源目錄進行劃分。其次執行時,快應用將優先載入基礎包和頁面所在分包,其餘分包會自動在後臺進行預載入。

目前快應用分包大小有以下限制:

  • 整個快應用的所有分包大小不超過 4M;
  • 單個分包/基礎包大小不能超過 1M;

分包載入,雖然不能減小 rpk 整體體積,但可以減小 rpk 首次下載時的體積,從而加快下載,促進頁面渲染。是輕應用界常見的優化方案(小程式、快應用,都支援這種方案)。 分包載入文件 已經寫的比較詳細,在此就不做過多贅述。

除此上述提到的方法,還有蠻多其他技巧。您知道,快應用構建工具,其核心也是基於 Webpack( 5.24.0 ),因而適用 Webpack 的優化方法,其中大部分,對於 快應用 同樣起作用,如以下這些建議:

快應用包依賴分析工具

欲要優化構建後包體積,需對構建後的產物進行分析,定位出造成體積大的原因,才能徹底解決訴求。在快應用中,也可以運用 webpack-bundle-analyzer 外掛(支援將內容束展示為方便互動的直觀樹狀圖,讓開發者瞭解所構建包中真正引入的內容;從而發現它大體有哪些模組組成,找到不合時宜的存在,然後優化它)。 webpack-bundle-analyzer 雖然內容豐富,展示也很直觀,但針對 快應用 rpk 包的分析,也存在很大侷限性;因此快應用 IDE 研發團隊,有推出「 程式碼靜態依賴分析 外掛( hap-bundle-analyzer )」,旨在方便開發者檢視程式碼檔案構成和依賴關係,以優化程式碼包大小和內容(優化資源尺寸、剔除重複構建等。

快應用 IDE 提供 程式碼靜態依賴分析外掛 ,旨在方便開發者檢視程式碼檔案構成和依賴關係,以優化程式碼包大小和內容(優化資源尺寸、剔除重複構建等,具體操作可參見文章 ── 如何優化「快應用」rpk 包體積? ),從而促進應用程式執行更迅速。

注意:需要先安裝外掛 hap-bundle-analyzer ,請在外掛市場安裝。

安裝完成之後,可通過側邊欄「 快捷入口 」「 依賴分析 」或者 ctrl + shift + p 輸入 quickapp analyzer 使用該功能。

  • 資源依賴分析

    給予使用者直觀的顯示打包後的資原始檔的路徑列表及其大小,方便使用者優化資原始檔的體積:

    • 資原始檔大小超過 120 KB ,可能導致包的體積過大,可優化。
    • 資原始檔大小在 50 KB120 KB 之間。
    • 資原始檔大小小於 50 KB

  • 重複引用分析

    該功能用於統計在打包之後,各個檔案的被引用次數。只展示大於等於兩次的引用,您可根據被引用的次數和大小,來優化程式碼,以減小 rpk 體積,您可點選「 頁面引用詳情 」下的「 檢視引用路徑 」來檢視該檔案被頁面引用的詳細路徑。

  • 依賴分析

    該功能用於統計在打包之後,各個檔案的依賴關係。根節點為各個頁面的路徑,子節點為頁面匯入的元件或者是檔案路徑,顯示的檔案大小為原始沒有經過 minify 處理的檔案大小。