小程序常见知识
小程序常见知识
一、主包和分包
分包：指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同分包，用户在使用时按需进行加载。
分包的原因：小程序上线，要求整个小程序大小不超过16M（主包+所有分包），单个主包/分包大小不超过2M。
分包加载规则：小程序启动默认下载主包并启动分包，用户进入分包某个页面时，客户端会把对应分包下载。
1.1 分包类型
分包类型分为：普通分包、独立分包。
1.1.1 普通分包
在app.json的subpackages节点中声明分包的结构即可。
打包原则：
- 主包也可有pages；
- tabBar页面必须在主包内；
- 分包之间不能相互嵌套；
主包资源是全局公用的，分包相对于拥有自己的作用域，不能使用其他子包资源。
1.1.2 独立分包
独立分包也是分包，独立于主包和其他分包，单独运行，一个小程序可以有多个独立分包。
与普通分包的区别就在于：不依赖主包就能运行。
应用场景：可以按需，将某些具有一定功能的独立性页面配置到独立分包中，可以提升启动速度。
配置很简单，直接在subpackages对应的分包配置加一个属性：
1 | "independent": true |
注意：独立分包与主包、普通分包、其他独立分包都是相互隔绝的，不能引用彼此资源。
二、代码注入
小程序启动过程中，在代码包下载及校验后，会存在代码注入这个环节。注入代码量的大小和内存占用与耗时正相关。
通常情况下，启动页面会将依赖的所有代码包（主包、分包、插件包、扩展库等）的所有JS代码全部注入合并，这里包括其他未访问的页面以及未用到的自定义组件，同时所有的JS代码会被立刻执行，造成很多未使用的代码在运行环境中注入执行，影响耗时。
2.1 按需注入
自基础库版本 2.11.1 起，小程序支持通过配置，有选择地注入必要的代码，以降低小程序的启动时间和运行时内存。
1 | { |
启用按需注入后，当前页面未声明的自定义组件不会被加载和初始化，对应代码文件将不被执行。
页面 JSON 配置中定义的所有组件和 app.json 中 usingComponents 配置的全局自定义组件，都会被视为页面的依赖并进行注入和加载。
插件包和扩展库目前暂不支持按需注入。
2.2 用时注入
在开启按需注入特性的前提下，用时注入可以指定一部分自定义组件不在小程序启动时注入，而是在真正渲染的时候才进行注入。
在已经指定 lazyCodeLoading 为 requiredComponents 的情况下，为自定义组件配置占位组件，组件就会自动被视为用时注入组件。
2.3 注入与分包关系
做性能优化分析的时候，遇到一个问题：启动直接打开分包页面，这个时候主包代码会被注入吗？
组里大佬给出答案：只有独立分包，启动打开此页面，只有此分包代码会被注入，而主包代码不会；其他情况，主包和分包代码都会被同步注入。
三、TTI统计
3.1 定义
在开始对TTI进行时间段拆分前，最重要的点是你对TTI是如何定义的，我这里就遇到了这个概念上的定义问题。
TTI：首屏页面从开始加载到可交互的时间。
场景：小程序首页由于部分数据受到中台的原因，设置了两个接口，前一个接口是卡列表的数据查询，后一个接口是查询task的时间，同时将对应的task组件异步分包。
面对的问题：TTI是否需要计算后一个接口响应数据并挂载的时间。
答案：不需要，首先TTI针对的对象虽然是首屏，但无需首屏所有数据都要加载完毕才算TTI；其次，既然已将task返回的数据挂载到的组件已经异步分包，那就证明这些数据非首屏核心数据，不是用户所需的核心数据（如果是，就不应该异步分包）。
3.2 时间段拆分
首先TTI可以拆分为：冷启动耗时+首屏区域可交互耗时。
3.2.1 冷启动
这里微信小程序官方提供了一个方法（https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/start_process.html），供我们去统计。
PerformanceEntry里面有一个appLaunch的指标，指的便是冷启动耗时。
这里有个注意点：appLaunch不区分主包和分包，只要是某一页面从触发到页面进入onReady前，这一段冷启动都是appLaunch。
3.2.2 首屏区域可交互
这里我进行了拆分，依据的是请求主接口耗时为分界点：
- 分包就绪时间：页面onReady到请求主接口前的耗时；
- 接口响应耗时：从请求主接口到数据返回的耗时；
- 渲染耗时：获取数据后到页面可以进行交互的耗时；
四、数据预请求
4.1 token&code
进行数据预请求的前提是进行登录校验。
这里会涉及两个概念token与code。
token是访问令牌，而code是登录凭证，在处理用户身份验证和授权时，扮演着不同角色，为此需要区分一下两者的概念。
| token | code | |
|---|---|---|
| 定义 | 服务端生成的长期有效的令牌，用于小程序api的请求验证 | 临时的登录凭证，小程序中通过wx.login()生成 |
| 有效期 | 开发者自定义（一般几小时/几天） | 有效期很短，通常几分钟 |
| 处理方式 | 无需外部服务参与，只是验证请求是否来自已验证的用户 | 使用code向第三方服务请求，获取用户信息（session_key、openid），生成token |
