前言
公司微信小程序项目目前正在做性能优化处理,本文主要总结下启动优化方面的内容。
启动优化主要从两方面入手:
- 小程序代码包大小优化
- 首屏渲染优化
一、小程序代码包大小优化
在小程序初次启动时,需要下载编译后的代码包到本地,随着代码包大小的上升,耗时也会相应增加。
- 普通分包
- 独立分包
- 分包预下载
主包:放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本
分包大小限制:
- 整个小程序所有分包大小不超过 12M
- 单个分包/主包大小不能超过 2M
1、使用分包
分包加载可以将小程序划分为主包和若干个分包,将较少用到的页面或功能划分到若干个分包中,主包内只保留最频繁使用的页面和公共的代码。小程序启动时默认只加载主包,再按需加载分包。
- 修改文件目录结构,分包目录与主包目录平级
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
- 在app.json中使用subpackages(也可写成subPackages)字段声明项目分包结构
subpackages配置如下:
字段 | 类型 | 说明 |
---|---|---|
root | String | 分包根目录 |
name | String | 分包别名,分包预下载时可以使用 |
pages | StringArray | 分包页面路径,相对与分包根目录 |
independent | Boolean | 分包是否是独立分包 |
{
"pages":[
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
注意:
- tabBar 页面必须在 app(主包)内
- 打包时subpackages配置路径外的目录将被打包到 app(主包)中
- 分包之间无法共享资源,但可以使用主包,自己分包内的资源
2、独立分包
独立分包可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。当用户进入普通分包或主包内页面时,主包才会被下载。
一个小程序中可以有多个独立分包。
可以将部分对启动性能要求很高的页面放到特殊的独立分包中(如广告页、活动页、支付页等)。当小程序从独立分包页面启动时,只需要下载分包就可以直接运行,可以很大程度上提高分包页面的启动速度,实现小程序的秒开。
配置方法:在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。
{
"pages": [
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "moduleA",
"pages": [
"pages/rabbit",
"pages/squirrel"
]
}, {
"root": "moduleB",
"pages": [
"pages/pear",
"pages/pineapple"
],
"independent": true
}
]
}
注意:
- 独立分包中不能依赖主包和其他分包中的内容,包括js文件、template、wxss、自定义组件、插件等。
- 主包中的app.wxss对独立分包无效,应避免在独立分包页面中使用 app.wxss 中的样式;
- App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为;
- 独立分包中暂时不支持使用插件。
3、分包预下载
分包预下载是为了解决首次进入分包页面时的延迟问题而设计的。 如果开启了分包加载能力,在用户访问到分包内某个页面时,小程序才会开始下载对应的分包。当处于分包下载阶段时,页面会维持在 “白屏” 的启动态,会影响小程序的使用体验。
配置方法:在进入某个页面时触发,通过在 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 是进入此页面的预下载配置,每个配置有以下几项:
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name。APP 表示主包。 |
network | String | 否 | wifi | 在指定网络下预下载,可选值为: all:不限网络 wifi: 仅wifi下预下载 |
注意:
- 同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。
- 如,页面 A 和 B 都在同一个分包中,A 中预下载总大小 0.5M 的分包,B中最多只能预下载总大小 1.5M 的分包。
vConsole 里有preloadSubpackages开头的日志信息,可以用来验证预下载的情况。