用uni-app开发微信小程序:设置分包和预下载

说明

小程序分包
https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages

因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。

所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据pages.json的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。

分包预加载
https://uniapp.dcloud.net.cn/collocation/pages.html#preloadrule

配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。

示例

新建分包页面

右键单击,选择 新建uniapp页面(分包):
在这里插入图片描述

输入页面名称、导航栏标题:
在这里插入图片描述

分包页面输入一点简单内容:
在这里插入图片描述

pages.json文件自动更新了分包(但不知什么原因,路径不对):
在这里插入图片描述

手工修改下:
在这里插入图片描述

在另外一个页面中引用分包页面的地址:
在这里插入图片描述

在微信小程序中,点击 设置:
在这里插入图片描述

跳转到了分包的页面:
在这里插入图片描述

配置分包预下载

例如,配置进入pages/my/my 页面的时候,分包预下载:
在这里插入图片描述

进入微信开发者工具:
在这里插入图片描述

例如,点击 分类 页面,没有触发分包预下载:
在这里插入图片描述

点击 我的 页面,触发了分包预下载,而且下载成功了:
在这里插入图片描述

在使用uni-app开发微信小程序时,如果你在分包页面使用了import导入了marked插件,可能会导致主包体积变大,因为import导入的模块会被包含在主包中。为了解决这个问题,你可以采用分包加载或者动态import的方式来按需加载插件,避免它被包含在主包中。 以下是解决方式及代码实现的步骤: 1. 在`pages.json`中配置分包加载: 在`subpackages`的每个分包内,可以设置` preloadRule`配置,用于配置分包内的页面的下载行为。这样可以将一些不常用的分包内容,在需要时再加载。 ```json { "pages": [ "pages/index/index" ], "subpackages": [ { "root": "pkgA", "pages": [ "pages/a/a" ], "preloadRule": { "pages/a/a": { "network": "all", "packages": ["pkgA"] } } } ] } ``` 2. 使用动态import语法: 在页面的`onLoad`或者`onShow`方法中动态import你需要的模块,这样这些模块只有在真正需要时才会被加载。 ```javascript export default { onLoad() { import('./marked.js').then(marked => { // 在这里使用marked插件 }).catch(err => { // 处理错误 }); } } ``` 3. 使用动态import结合require的方式: 如果你的项目中无法使用es6的动态import语法,你还可以使用require的方式进行动态加载。 ```javascript export default { methods: { loadModule() { const loadModule = () => { const marked = require('./marked.js'); // 使用marked }; loadModule(); } }, onLoad() { this.loadModule(); } } ``` 注意,使用动态import的方式可能会使得应用在首次加载时稍微慢一些,因为它需要在运行时动态加载模块,但是可以显著减小主包的体积。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值