31.1 常规分包

如果说我们写的小程序整体大于了 2M 怎么办呢？可以说这个情况在如今小程序日益壮大、火热下，是很容易出现的。一个好的小程序必定会很大。功能多，界面多，无论你怎么做优化和压缩其实都会超过 2M。

答：分包机制。小程序官方提供了这样的一个机制。可以把整个小程序进行分包。单个分包/主包不能超过 2MB 大小！所有分包加在一起的大小不超过 16MB。

注意

加载小程序的时候还是先加载主包，当需要访问分包的页面时，才会加载分包的内容。
分包的页面可以访问主包的文件、数据、图片等资源
除了分包以外的内容都会被打包到主包中去。主包通常会打包一些 tarBar 页面。
除了 tarBar 页面，在开始时不需要加载的页面其实都应该想办法将其分包。

直接新建分包目录，然后把对应的页面放到目录下。

app.js 配置分包

{"pages": ["pages/index/index","pages/login/login","pages/personal/personal","pages/video/video","pages/search/search"],"style": "v2","sitemapLocation": "sitemap.json","window": {"navigationBarBackgroundColor": "#d43c33","navigationBarTextStyle": "white","navigationBarTitleText": "云音乐"},"tabBar": {"color": "#333","selectedColor": "#d43c33","list": [{"pagePath": "pages/index/index","text": "主页","iconPath": "/static/images/tabs/tab-home.png","selectedIconPath": "/static/images/tabs/tab-home-current.png"},{"pagePath": "pages/video/video","text": "视频","iconPath": "/static/images/tabs/select.png","selectedIconPath": "/static/images/tabs/selected.png"},{"pagePath": "pages/personal/personal","text": "个人中心","iconPath": "/static/images/tabs/tab-my.png","selectedIconPath": "/static/images/tabs/tab-my-current.png"}]},"requiredBackgroundModes": ["audio"],"subpackages": [{"root": "songPackage","pages": ["pages/recommendSong/recommendSong","pages/songDetail/songDetail"]},{"root": "otherPackage","pages": ["pages/other/other"]}]
}

去更改相关的代码

31.2 独立分包

什么是独立分包呢？

答：独立分包最主要的特点在于可单独访问分包的内容，不需要下载主包。独立分包是不依赖于主包和其他包独立存在的内容！（也就是说当我独立分包的页面加载的时候，就绝对不会加载其它的页面。即使我用到了其他页面的东西，我也不加载！）

使用场景：通常某些页面和当前小程序的其他页面关联性不大的时候，就可以进行独立分包了。比如说临时添加的 广告页 或者 活动页。

举例

你比如说，我们所有的 iconfont 其实都是依赖于主包的 app.wxss 的。
那么我们如果把一个分包设为独立分包的话。是不是 iconfont 就不会被加载。这是肯定的！

首先直接在 app.json 里面对其中一个分包配置那里，添加一个属性 "independent": true 这个分包就会变成独立分包了。对的，就这么简单！！！

我们细心的发现确实所有的 iconfont 都消失了！

这个时候怎么办呢？答：因为独立分包了，所以是一个独立的个体，那么自己的 iconfont 就自己导入呗。能咋办？

你看，这样不就恢复了嘛。

31.3 分包预下载

分包预下载是必须要开发的一个功能！这个是无可厚非的。基本上大多数产品的初衷都是考虑到广大用户的体验的。而用户打开小程序某个页面的加载速度，想要得到质的提高。就必须得预下载！而不是说做什么优化。预下载是最简单粗暴的提高方式！

当你预下载完资源后，打开页面的速度肯定是质的飞跃和提高！

其实使用起来也很简单啊，都是配置级别的使用方式。

app.json 当中直接配置

{"pages": ["pages/index/index","pages/login/login","pages/personal/personal","pages/video/video","pages/search/search"],"style": "v2","sitemapLocation": "sitemap.json","window": {"navigationBarBackgroundColor": "#d43c33","navigationBarTextStyle": "white","navigationBarTitleText": "云音乐"},"tabBar": {"color": "#333","selectedColor": "#d43c33","list": [{"pagePath": "pages/index/index","text": "主页","iconPath": "/static/images/tabs/tab-home.png","selectedIconPath": "/static/images/tabs/tab-home-current.png"},{"pagePath": "pages/video/video","text": "视频","iconPath": "/static/images/tabs/select.png","selectedIconPath": "/static/images/tabs/selected.png"},{"pagePath": "pages/personal/personal","text": "个人中心","iconPath": "/static/images/tabs/tab-my.png","selectedIconPath": "/static/images/tabs/tab-my-current.png"}]},"requiredBackgroundModes": ["audio"],"subpackages": [{"root": "songPackage","pages": ["pages/recommendSong/recommendSong","pages/songDetail/songDetail"],"independent": true},{"root": "otherPackage","name": "other""pages": ["pages/other/other"]}],"preloadRule": {/*index 加载完成后 需要 预下载哪个包*/"pages/index/index": {"network": "all", /*预下载 网络模式 all 就是数据和wifi都可以，wifi 就是光 wifi 模式 下载*/"packages": ["songPackage","other"]}}
}

"name": "other" 这个属性是别名机制，就是可以给我们的一个分包弄一个别名。当然预下载可以识别这个别名。

注意：app.json 中不能随便写注释，其实很多关键的配置文件都是如此的。否则会报错！

什么时候我们会预加载主包

这个属实是不知道什么时候加载。你说独立分包去加载主包吧 ~ 实际上加载了也没啥用。还是独立的。那么到底什么时候加载主包呢。广大网友知道的，请在评论区告知。

微信小程序 31 分包机制相关推荐

hbuilderx 小程序分包_基于uniapp的微信小程序之分包
0. 缘由最近工作在接触uni-app,用它来开发微信小程序,也是第一次接触,找了很久,还有大佬用自己写的函数做的,俺觉得我不会也不配,刚好看到下面评论是官方也支持了,所以就用官方的了,这里记录一下 ...
微信小程序的分包功能
微信小程序的分包做小程序开发的人都知道,微信小程序上传包的大小最大为2M,,超过之后就无法上传,那么我们如何解决较大的项目呢,那么就要采用分包配置了,下面是分包的一些说明: 微信小程序每个分包的大小 ...
uniapp开发微信小程序设置分包，简单易学（图解）
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是最重要的来了,分包这 ...
微信小程序之分包加载，解决代码超过2M的方法
2017.01.09 小程序上线时,微信限制了代码包不能超过1MB 大小,(现在是2M了)限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种"秒开" ...
HbuilderX微信小程序uniapp分包小白教程趟坑【伸手党福利】【干货】
本教程为小白教程,主管操作,具体原理讲解欢迎评论区补充. 微信小程序分包原因: 1.多人开发 2.引入了大型js 3.单项目多模块需要分包官方资料: https://developers.weixi ...
微信小程序登陆验证机制理解及实现
椰汁笔记,欢迎指正微信小程序的登录(python flask实现后端),实现的核心是让服务器得到用户的openid. 服务器生成sessionId发送给客户端,sessionId即是客户端和服务器 ...
微信小程序的分包加载
文章目录前情提要小程序的包结构 app.json声明包结构独立分包声明独立分包分包预下载声明分包预下载搭建静态资源服务器小程序项目 app.json 主包 app.wxss app.j ...
微信小程序_23,分包
什么是分包: 分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时,打包成不同的分包,用户在使用时按需进行加载分包的好处: 可以优化小程序首次启动的下载时间在多团队共同开发时可以更 ...
Windows电脑反编译微信小程序含分包详细操作
文章目录环境准备 1. node 环境准备 2.反编译工具具体操作 1.微信PC获取小程序 2.解密包 3.反编译现在网上也有很多关于小程序反编译的教程,随时间的流逝或许随着微信的更新,有出现编 ...

微信小程序 31 分包机制

31.1 常规分包

31.2 独立分包

31.3 分包预下载

微信小程序 31 分包机制相关推荐

最新文章

热门文章