微信小程序----關於分包

有時候我們的小程序太大，首次打開小程序的時候回比較慢，這個時候我們可以試試分包操作。分包可以讓用戶在操作小程序的時候按需下載資源（用戶在進入某些頁面的時候才去下載相應的資源，可以加快小程序的速度，優化用戶體驗）。

 

小程序代碼有個2M限制，是不是有的時候放圖片都得忍着點，不敢把太大的放在小程序里面，只能放遠程；但是隨着項目不斷迭代更新，代碼圖片越來越多，開發的時候更加小心翼翼。是不是很不舒服，還能不能讓我舒服的敲代碼了。

 

那就說一下分包的限制吧；分包以后單獨包最大不能超過2M；整個小程序可以達到8M；比那2M限制翻了4倍；那就讓我們愉快地敲代碼吧。

 

首先在app.json里面全局配置里面配置分包：（subpackages 屬性和pages同級）

通過我的截圖可以看出來，我在根目錄創建了一個名為shopping的分包（shopping這個文件夾里面的文件都會打包到分包里面去）；

 

然后我再shopping這個包里面創建了一個頁面（一般新建的頁面都要在pages里面聲明，現在包里面的頁面不需要在pages里面聲明，只需要在我們聲明的分包里面的pages里面聲明，是相對root路徑的路徑）。

去網上隨便找了幾張圖片，力求把整個小程序的大小超過2M。

在主包的首頁設置個點擊跳轉到分包，把圖片都引入，然后點擊預覽

從首頁點擊跳轉到分包頁效果：

     

簡單的分包就寫好啦

 

 

 

分包--預加載

 

分包預加載，通過app.json里面的 preloadRule 屬性配置也加載。

這樣配置的效果就是當我們進入到shop_load（自己隨便新建一個頁面）的時候會靜默的加載我們的shopping包。當我們在進入包頁面的時候，就流暢進入了。

    

  

 

獨立分包

 

獨立分包就是這個包是獨立的，不依賴於主包就能用，當設置為獨立分包時，我們從獨立分包進入不會加載主包，只有進入主包頁面或者非獨立分包頁面是才加載主包。

 

使用方法就是前面截圖寫的，只要在配置包的時候，把independent 設置為 true就成為獨立分包。

 

獨立分包注意事項：

 

1. 從獨立分包進入的時候，由於沒有加載主包，因此通過getApp()方法拿到的是undefined；只有在加載主包回來這個頁面以后才能通過getApp拿到全局參數。
2. 獨立分包不能共享其他包樣式，包括app.wxss樣式。
3. 獨立分包不支持使用插件
4. 在低於6.7.2的微信版本的小程序獨立分包當成普通分包對待，不具備獨立分包的能力。

 

為了兼容獨立分包進入無法全局管理變量的能力，官方在基礎版本庫2.4.4以后做了兼容，使用 getApp({allowDefault: true}) 可以預先寫入變量，當主包加載的時候回同步到app里面。

代碼：

1.  
   const app = getApp({allowDefault: true})；
2.  
    
3.  
   app.aa =  1;  //  等主包加載的時候回同步進去