134-8274-2882
电话:
发布时间 2024/6/13 10:00:59 阅读: 77
分包加载是微信小程序体积的和启动耗时优化最明显的手段。可按功能、使用频率和场景划分分包。
按需注入
,小程序编译时会将所有js文件打包成同一个文件一次性注入,并执行所有(页面和自定义组件)代码逻辑。分包可以降低注入和实际执行的打码量,从而降低耗时。(如活动页、支付页、推广页···)
归于独立分包
中。在app.json
的subpackages
字段中对应的分包配置项中定义independent
字段声明对应分包为独立分包。【moduleB】为独立分包。
限制:
const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}
// app.json
{
"pages": [
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "moduleA",
"pages": [
"pages/rabbit",
"pages/squirrel"
]
}, {
"root": "moduleB",
"pages": [
"pages/pear",
"pages/pineapple"
],
"independent": true
}
]
}
app.json
增加 preloadRule
配置来控制。// app.json
"pages": ["pages/index"],
"subpackages": [
{
"root": "important",
"pages": ["index"],
},
{
"root": "indep",
"pages": ["index"],
"independent": true
}
],
"preloadRule": {
"pages/index": {
"network": "all",
"packages": ["important"]
},
"sub3/index": {
"packages": ["path/to"]
},
"indep/index": {
"packages": ["__APP__"]
}
}
preloadRule
中,key
是页面路径,value
是进入此页面的预下载配置,每个配置有以下几项:
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name 。__APP__ 表示主包。 |
network | String | 否 | wifi | 在指定网络下预下载,可选值为: all : 不限网络 wifi : 仅wifi下预下载 |
分包异步化
将小程序的分包从页面粒度细化到组件甚至文件粒度。使原本只能放在主包的部分插件、组件和代码逻辑可以剥离到分包中,并在运行时异步加载,进一步降低启动所需加载的包大小和代码量。分包异步化解决主包大小过度膨胀问题跨分包JS代码引用:一个分包中的代码引用其它分包的代码时,为了不让下载阻塞代码运行,我们需要异步获取引用的结果。且配置占位组件 componentPlaceholder
字段。
// subPackageA/index.js
// 使用回调函数风格的调用
require('../subPackageB/utils.js', utils => {
console.log(utils.whoami) // Wechat MiniProgram
}, ({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
// 或者使用 Promise 风格的调用
require.async('../commonPackage/index.js').then(pkg => {
pkg.getPackageName() // 'common'
}).catch(({mod, errMsg}) => {
console.error(`path: ${mod}, ${errMsg}`)
})
在APP.JSON中通过usingCompenents全局引入的自定义组件和plugins全局引入的插件,会在小程序启动时随主包一起下载和注入JS代码,影响启动耗时。
小程序代码包下载时会使用ZSTD算法进行压缩,图片、音频、视频、字体等资源文件占用较多体积。建议将代码包中此类资源尽可能部署到CDN,并使用URL引入
除工具默认忽略和开发者声明忽略的文件外,微信小程序打包会将工程目录下所有文件都打入代码包内。意外的第三方库、废弃的代码、产品环境不需要的测试代码、未使用的组件、插件、扩展库等这些文件资源将影响代码包大小。
建议使用开发者工具提供的【代码静态依赖分析】,不定期分析包文件的构成和依赖关系,清理未使用的代码文件。也可使用工具设置的packOptions.ignore配置忽略规则
// app.json
{
// ...
"lazyCodeLoading": "requiredComponents"
}
在已经指定 lazyCodeLoading
为 requiredComponents
的情况下,为自定义组件配置 占位组件 componentPlaceholder
,组件就会自动被视为用时注入组件。
// app.json
{
"usingComponents": {
"comp-a": "../comp/compA",
"comp-b": "../comp/compB",
"comp-c": "../comp/compC"
},
"componentPlaceholder": {
"comp-a": "view",
"comp-b": "comp-c"
}
}
在小程序启动流程中,代码同步执行 APP.onLaunch、App.onShow、Page.onLoad、Page.onShow
// app.json
{
"lazyCodeLoading": "requiredComponents",
"usingComponents": {
"comp-a": "../comp/compA",
"comp-b": "../comp/compB",
"comp-c": "../comp/compC"
},
"componentPlaceholder": {
"comp-a": "view",
"comp-b": "comp-c"
}
}
// app.json
{
"initialRenderingCache": "static"
}
小程序版本更迭,会发生如下,影响启动耗时。需合理规划版本发布
小程序时逻辑层和视图层双线程运行,不能直接进行数据共享,需要进行数据序列化、跨线程\进程的数据传输、数据反序列化,因此数据传输是异步、非实时的。setData流程:
(避免逻辑层JS线程持续繁忙,无法及时响应事件)
(传输数据量会影响通讯耗时)
onPageScrolll(){}
空事件视图层加载步骤:
懒加载
优化抖动、卡顿
现象按需注入
和用时注入
快速响应
7*12小时服务支持
保质高效完成
选择我们=选择放心
经验丰富
15年行业经验技术顾问为您服务
COPYRIGHT 2009-2023 songjiang.guanzhiweb.com ALL RIGHTS RESERVED
技术支持 上海观智网络科技有限公司