前端【小程式】04-小程式基礎篇【分包載入】

为你编程發表於2024-04-17
前端

一、分包載入

　　官方文件：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html​

　　分包載入是最佳化小程式載入速度的一種手段。

1.1 為什麼？​

  • 微信平臺對小程式單個包的程式碼體積限制為 2M，超過 2M 的情況下可以採用分包來解決
  • 即使小程式程式碼體積沒有超過 2M 時也可以拆分成多個包來實現按需載入
  • 配置檔案能忽略的只有靜態資源，程式碼無法被忽略
  • 拆分出多個包，這樣首次載入小程式的時候只會載入主包，主包越小，載入速度越快，使用者體驗越好

1.2 使用分包​

　　在全域性配置app.json中使用 subPackages 來配置分包的根目錄和分包中的頁面路徑：

 1 {
 2   "entryPagePath": "pages/index/index",
 3   "pages": [
 4     "pages/index/index",
 5     "pages/logs/logs"
 6   ],
 7   "subPackages": [  // 分包配置
 8     {
 9       "root": "pkg_house", // 指定分包的根目錄
10       "pages": [  // 指定分包中的頁面路徑，有多個頁面則多個路徑
11         "list/list",
12         "detail/detail"
13       ]
14     },
15     {
16       "root": "pkg_repair", 
17       "pages": [
18         "list/list",
19         "detail/detail"
20       ]
21     }
22   ],
23   "window": {
24     "navigationBarTextStyle": "black",
25     "navigationBarTitleText": "Weixin",
26     "navigationBarBackgroundColor": "#ffffff"
27   },
28   "style": "v2",
29   "componentFramework": "glass-easel",
30   "sitemapLocation": "sitemap.json",
31   "lazyCodeLoading": "requiredComponents"
32 }
  • root 指定分包的根目錄
  • pages 指定分包中的頁面路徑
  • tabBar的頁面不允許分包，必須包含在主包中
  • 所有包不超過20M

　　注：根目錄和路徑不存在時，小程式開發者工具會自動建立。

跳轉到分包頁面和之前正常寫法一樣，寫相對或者絕對路徑

1 <navigator url="/pkg_house/list/list">跳轉到分包頁面</navigator>

1.3 分包預載入​

　　在實際使用分包的過程中，純粹的按需載入也不是最優的方案，可以將即將訪問的頁面的包預先下載下來，這樣能進一步提升小程式載入的速度，透過 preloadRule 來配置預載入的包：

　　文件：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html

1 {
2   "preloadRule": {
3     "pages/framework/index": {
4       "network": "all",  
5       "packages": ["subpkg_user"]
6     }
7   }
8 }

　　上述程式碼的含義是在載入 pages/framework/index 頁面時，自動的去載入 subpkg_user 這個分包，等到要訪問這個分包中的頁面時會直接開啟。

欄位型別必填預設值說明
packages StringArray 是 無 進入頁面後預下載分包的 root 或 name。__APP__ 表示主包。
network String 否 wifi 在指定網路下預下載，可選值為：
all: 不限網路
wifi: 僅wifi下預下載

相關文章