<noframes id="bhrfl"><address id="bhrfl"></address>

    <address id="bhrfl"></address>

    <noframes id="bhrfl"><address id="bhrfl"><th id="bhrfl"></th></address>

    <form id="bhrfl"><th id="bhrfl"><progress id="bhrfl"></progress></th></form>

    <em id="bhrfl"><span id="bhrfl"></span></em>

    全部
    常見問題
    產品動態
    精選推薦

    一文教你Uniapp和小程序如何優雅分包

    管理 管理 編輯 刪除

    一、小程序分包

    每個使用分包小程序必定含有一個主包。所謂的主包,即放置默認啟動頁面/TabBar 頁面,以及一些所有分包都需用到公共資源/JS 腳本;而分包則是根據開發者的配置進行劃分。

    在小程序啟動時,默認會下載主包并啟動主包內頁面,當用戶進入分包內某個頁面時,客戶端會把對應分包下載下來,下載完成后再進行展示

    目前小程序分包大小有以下限制:

    整個小程序所有分包大小不超過 20M

    單個分包/主包大小不能超過 2M

    對小程序進行分包,可以優化小程序首次啟動的下載時間,以及在多團隊共同開發時可以更好的解耦協作。

    這里直接點擊去看官方的分包教程容易理解:

    https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

    二、uniapp分包小程序

    App默認為整包。兼容小程序的分包配置。其目的不用于下載提速,而用于首頁是vue時的啟動提速。

    • components:公共組件(供主包引用)
    • page_后跟拼音的都是分包
    • 分包里的components是單個分包自己的組件目錄,分包vue頁面的引用只能是在自己page_xxxx分包目錄下才可以引用
    • pages是主包,里面都是啟動頁面/TabBar 頁面
    • static里放的是公共靜態資源,圖片類

    分包步驟:

    1.配置manifest.json

    "mp-weixin": {
    "optimization":{"subPackages":true}
    }

    27fbb202401291729584037.png

    優化分包:

    在對應平臺的配置(manifest.json)下添加"optimization":{"subPackages":true}開啟分包優化

    目前只支持mp-weixin、mp-qq、mp-baidu的分包優化

    • 靜態文件:分包下支持 static 等靜態資源拷貝,即分包目錄內放置的靜態資源不會被打包到主包中,也不可在主包中使用
    • js文件:當某個 js 僅被一個分包引用時,該 js 會被打包到該分包內,否則仍打到主包(即被主包引用,或被超過 1 個分包引用)
    • 自定義組件:若某個自定義組件僅被一個分包引用時,且未放入到分包內,編譯時會輸出提示信息

    2.配置pages.json

    在pages.json中新建數組"subPackages",數組中包含兩個參數:1.root:為子包的根目錄,2.pages:子包由哪些頁面組成,參數同pages;

    注意:主包和分包是不能再同一目錄下,在構建uniapp項目時,可以考慮一下目錄結構,以便后期進行分包;

    d021d202401291731055472.png

    3.分包預載配置(preloadRule)

    做這一步主要為了優化速度,不想優化速度的可以跳過這個配置

    配置preloadRule后,在進入小程序某個頁面時,由框架自動預下載可能需要的分包,提升進入后續分包頁面時的啟動速度

    preloadRule 中,key 是頁面路徑,value 是進入此頁面的預下載配置,每個配置有以下幾項:

    字段類型必填默認值說明
    packagesStringArray進入頁面后預下載分包的 rootname。__APP__ 表示主包。
    networkStringwifi在指定網絡下預下載,可選值為:all(不限網絡)、wifi(僅wifi下預下載)

    app的分包,同樣支持preloadRule,但網絡規則無效。

    可查看官方配置項:

    https://uniapp.dcloud.io/collocation/pages?id=subpackages

    請登錄后查看

    CRMEB-慕白寒窗雪 最后編輯于2024-01-29 17:33:00

    快捷回復
    回復
    回復
    回復({{post_count}}) {{!is_user ? '我的回復' :'全部回復'}}
    排序 默認正序 回復倒序 點贊倒序

    {{item.user_info.nickname ? item.user_info.nickname : item.user_name}} LV.{{ item.user_info.bbs_level }}

    作者 管理員 企業

    {{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest == 1? '取消推薦': '推薦'}}
    {{item.is_suggest == 1? '取消推薦': '推薦'}}
    沙發 板凳 地板 {{item.floor}}#
    {{item.user_info.title || '暫無簡介'}}
    附件

    {{itemf.name}}

    {{item.created_at}}  {{item.ip_address}}
    打賞
    已打賞¥{{item.reward_price}}
    {{item.like_count}}
    {{item.showReply ? '取消回復' : '回復'}}
    刪除
    回復
    回復

    {{itemc.user_info.nickname}}

    {{itemc.user_name}}

    回復 {{itemc.comment_user_info.nickname}}

    附件

    {{itemf.name}}

    {{itemc.created_at}}
    打賞
    已打賞¥{{itemc.reward_price}}
    {{itemc.like_count}}
    {{itemc.showReply ? '取消回復' : '回復'}}
    刪除
    回復
    回復
    查看更多
    打賞
    已打賞¥{{reward_price}}
    7681
    {{like_count}}
    {{collect_count}}
    添加回復 ({{post_count}})

    相關推薦

    快速安全登錄

    使用微信掃碼登錄
    {{item.label}} 加精
    {{item.label}} {{item.label}} 板塊推薦 常見問題 產品動態 精選推薦 首頁頭條 首頁動態 首頁推薦
    取 消 確 定
    回復
    回復
    問題:
    問題自動獲取的帖子內容,不準確時需要手動修改. [獲取答案]
    答案:
    提交
    bug 需求 取 消 確 定
    打賞金額
    當前余額:¥{{rewardUserInfo.reward_price}}
    {{item.price}}元
    請輸入 0.1-{{reward_max_price}} 范圍內的數值
    打賞成功
    ¥{{price}}
    完成 確認打賞

    微信登錄/注冊

    切換手機號登錄

    {{ bind_phone ? '綁定手機' : '手機登錄'}}

    {{codeText}}
    切換微信登錄/注冊
    暫不綁定
    亚洲欧美字幕
    CRMEB客服

    CRMEB咨詢熱線 咨詢熱線

    400-8888-794

    微信掃碼咨詢

    CRMEB開源商城下載 源碼下載 CRMEB幫助文檔 幫助文檔
    返回頂部 返回頂部
    CRMEB客服