分包优化
微信小程序的分包可以将应用程序拆分成多个子包,从而可以按需加载和更新子包。
子包或分包是引用主包的资源,例如JS脚本、WXML模板和WXSS样式表文件的一个集合。
如何设置分包?
要设置分包,请在小程序的app.json文件中添加subpackages或subPackages属性,以指定应用程序的子包目录。每个子包都必须至少包含一个页面。子包可以按照自己的需求,可以是拥有多个页面或简单的组件库,视情况而定。
{
"pages":[
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
分包优点
分包还可以用于更好的管理和调整小程序资源,以优化性能。例如,可以将较大的资源放入独立的子包中,从而减少主包的体积,加快启动时间。还可以定期更新子包以提高小程序的性能和稳定性。
注意事项
在使用分包时,需要注意以下几点:
每个分包都必须至少包含一个页面。
分包的路径必须在小程序根目录下,遵循小程序规定的路径结构。
分包和主包之间不能重复,否则可能会导致性能问题和资源冲突。
分包会增加小程序的复杂度和管理难度,需要在开发中仔细规划和管理。
分包预加载
分包预加载是一种优化小程序性能的技术,在用户访问分包前提前加载分包的资源,从而减少用户等待时间和提高用户体验。
如何开启分包预加载?
要开启分包预加载,需要在小程序的app.json文件中添加preloadRule属性,以指定预加载的规则。可以根据需求指定哪些分包需要预加载,以及在何时需要预加载。
{
"pages": ["pages/index"],
"subpackages": [
{
"root": "important",
"pages": ["index"],
},
{
"root": "sub1",
"pages": ["index"],
},
{
"name": "hello",
"root": "path/to",
"pages": ["index"]
},
{
"root": "sub3",
"pages": ["index"]
},
{
"root": "indep",
"pages": ["index"],
"independent": true
}
],
"preloadRule": {
"pages/index": {
"network": "all",
"packages": ["important"]
},
"sub1/index": {
"packages": ["hello", "sub3"]
},
"sub3/index": {
"packages": ["path/to"]
},
"indep/index": {
"packages": ["__APP__"]
}
}
}
preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:
分包预加载优化
为了更好的利用分包预加载,可以考虑一些优化策略:
- 将加载时间较长的资源放在分包中,并将分包设置为预加载。
- 可以利用小程序提供的wx.loadSubPackage()方法手动触发分包预加载,以提高用户体验。
- 在分包资源的加载区间内显示loading动画,以缓解用户等待。
注意事项
在使用分包预加载时,需要注意以下几点:
需要仔细考虑和规划哪些分包需要预加载,加载规则需要遵循小程序规定的路径结构和逻辑关系。
预加载资源需要耗费一定的网络流量和设备性能,需要根据用户网络环境和设备条件进行调整。
仅在分包体积或加载速度较慢时使用预加载。
setData
当我们在微信小程序开发中需要更新数据时,可以使用setData()方法。setData()是用来改变这个页面数据的方法。
this.setData({
name: '小明'
})
优化setData()方法的技巧
- 避免使用setData()方法更新不必要的数据。只有在需要更新的数据发生变化时,才应该使用setData()方法。
- 使用批量更新setData()方法。这样可以减少多次setData()调用的次数,从而减少性能问题。可以将需要更新的数据一次性传递给setData()方法。
// 定义一个对象,包含需要更新的所有数据变量
const data = {
name: "Mike",
age: 25
};
// 调用setData()方法,并将data对象作为参数传入
this.setData(data);
-
对于大量数据的更新,可以考虑使用云函数进行处理,以减轻客户端的负担。
-
对于需要频繁更新的数据,可以使用WXS(小程序中的一种脚本语言)或持久化存储方式,减少setData()方法的调用次数。
-
使用虚拟列表技术,当数据量过大时,只渲染可见区域的内容,从而提高渲染速度。
WXS
WXS是小程序中的一种脚本语言,可以在wxml中嵌入JavaScript代码,用于数据处理和模板渲染等。使用方法如下:
- 在wxml文件中,使用标签引入WXS脚本代码块,并通过module属性指定模块名称。
- 在WXS脚本中,可以定义变量、函数和对象等。使用module.exports将定义的变量和函数等导出,以便在wxml中使用。
- 在wxml中,使用{{}}插值语法调用WXS中的函数和变量等。注意要使用模块名称作为标识符,例如,module.variable。
- 可以通过include标签引入WXS脚本文件,避免多个wxml页面中重复定义相同的WXS代码。
举例如下:
<wxs module="calc">
var num1 = 0
var num2 = 0
var result = 0
function add() {
result = num1 + num2
return result
}
function onInput(event) {
if (event.target.id === 'num1') {
num1 = parseInt(event.detail.value) || 0
} else if (event.target.id === 'num2') {
num2 = parseInt(event.detail.value) || 0
}
this.setData({
result: add()
})
}
module.exports = {
onInput: onInput
}
</wxs>