小程序分包加载实现代码包总上限8M

1 year ago

source link: https://www.daguanren.cc/post/subpackage_8m_wxapp.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

小程序分包加载实现代码包总上限8M

2018年6月15日周五23点43分，小程序发布官方公告：小程序分包加载功能升级，新增性能监控，意味着小程序的代码包总上限可提升至8M，但是分包的大小还是不超过2M。即可以使用1个主包，3个分包的方式达到8M的总的代码包大小。这对于广大开发者来说无疑是重大喜讯，那么究竟如何利用代码实现呢？

先来看下实现效果，如下GIF所示，原本一个主包放不下的图片（超过2M），可以放在分包下，实现代码总限超过2M，但分包大小不超过2M。

我的app.json的内容如下：

//app.json  "pages": [        "pages/index/index",    "pages/loading/loading",    "pages/logs/logs",    "pages/login/login"  "subPackages": [      "root": "packageWeibo",      "pages": [        "pages/home/home"      "root": "packageShop",      "pages": [        "pages/goods/goods",        "pages/order/order"  "window": {    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "大官人的博客",    "navigationBarTextStyle": "black"prolog

分包加载流程

一般情况下，小程序的代码将打包在一起，在小程序启动时一次性下载完成。采用分包时，小程序的代码包可以被划分为几个：一个是“主包”，包含小程序启动时会马上打开的页面代码和相关资源；其余是“分包”，包含其余的代码和资源。这样，小程序启动时，只需要先将主包下载完成，就可以立刻启动小程序。这样就可以显著降低小程序代码包的下载时间。

更多可参考小程序开发指南

如上图所示，我这里的两个子目录packageWeibo和packageShop就构成了两个分包，每个分包下都可以有自己的页面代码和资源文件，如images和pages。而除掉这两个目录的部分就是小程序的主包。在小程序启动时，“packageWeibo”和“packageShop”两个子目录的内容不会马上被下载下来，只有主包的内容才会被下载。利用这个特性就可以显著降低初始启动时的下载时间。

模块加载效果如下GIF图所示：

实现代码如下：

<!--pages/login/login.wxml--><text>pages/login/login.wxml</text><button type="primary" bindtap="sendRequest"> primary </button><button type="primary" bindtap="wxlogin"> login </button><button type="primary" bindtap="shopGoods"> shopGoods </button>   * shopGoods  shopGoods: function (e) {    if (e) {      wx.navigateTo({        url: '/packageShop/pages/goods/goods'<!--pages/goods/goods.wxml--><text>这是分包packageShop下的商品goods主页</text>dust

完整示例代码请浏览： https://github.com/haodalong/daguanren-wxapp-demo （记得给小星星哦）

Recommend

102