微信小程序、常规分包、独立分包、分包预下载


小程序的容量大小是2MB一但超过就会提示不能上传或真机,这时候通过分包可以解决,分包一般放的是tabBar主页下面的跳转页面

分包构视图

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

常规分包

pages是主包优先加载,packageA,packageB是分包需要使用时才会加载

如图所示在pages同层级新建文件夹

 

 在分包下分别再新建一个文件夹,叫pages,里面放要分开的页面文件夹

在app.json里进行配置

{
  "pages":[ //主包
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [  //分包
    {
      "root": "songPackage", //分包根的目录
      "pages": [
        "pages/recommendSong/index", 
        "pages/songDetail/index" //分包页面路径,相对与分包根目录
      ]
    }, {
      "root": "otherPackage", //分包根的目录
      "pages": [
        "pages/other/index" //分包页面路径,相对与分包根目录
      ]
    }
  ]
}        

注,分包后引入其它东西的路径

打开详情,后可以查看分包情况

 

 总结 :  a) 加载小程序的时候先加载主包,当需要访问分包的页面时候才加载分包内容

     b) 分包的页面可以访问主包的文件,数据,图片等资源

     c) 主包: i. 主包来源: 除了分包以外的内容都会被打包到主包中

           ii. 通常放置启动页/tabBar 页面

 

 

独立分包

  

 

 

 如图所示只需要在json页面下添加一个属性即可,独立分包一般用于,使用临时增加的广告页面,活动页面,注:独立分包不可不能依赖主包或者其他包的内容

 

总结:a) 独立分包可单独访问分包的内容,不需要下载主包

   b) 独立分包不能依赖主包或者其他包的内容

 

分包预下载

  分包预下载属性必须要和常规分包的属性同一层级如图

  

 

  在preloadRule里使用要预加载的页面

     

可以在里面添加一些,其它属性

          network:all (不限网络)  /   wifi (仅wifi下预下载)

"preloadRule": {
  "pages/index/index": {
      "network": "all", "packages": ["songPackage"]  },
}

 

packages里也可加载主包,用于独立分包

"indep/index": { "packages": ["__APP__"] }

总结:
   a) 在加载当前包的时候可以设置预下载其他的包
   b) 缩短用户等待时间,提高用户体验


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM