微信小程序页面分包异步化

本文介绍一种保持小程序路径不变,同时可以灵活分包的实践。

完整代码片段:
developers.weixin.qq.com/s/VpoHtdmJ7...

「墨问便签」小程序的体积接近 2M 的小程序包上限了,于是需要进行分包,以支持更大的体积。

目前把个人主页的子版块,打入了一个分包中,并使用了预加载。例如「设置」页,可以线上看效果。

先来看看传统的分包方案:

方案一: 使用小程序文档的示例方式配置

页面路径 /pages/foo/index

分包后路径 /packageA/pages/foo/index

路径的变化,是破坏性改动:

  1. 需要改动页面跳转的代码;
  2. we 分析的数据会中断,也需要重新配置新的页面;
  3. 已经分享出去的页面,需要做兜底。

那么如何保持路径不变呢?

方案二: 每个页面分为 1 个包

分包后页面路径依然为 /pages/foo/index

这么做存在 2 个问题:

  1. 分包最多 100 个,无法支持无限的页面;
  2. 拆的太细,包体积很小。预加载的逻辑会变复杂。

那么使用「分包异步化」来解决这个问题吧。

分包是一个下载单位,分包异步化可以很灵活的加载自定义组件、JS 文件。核心思路是把页面变为一个自定义组件。

项目文件结构如下:

分包配置如下:

⚠️注意,目前由于开发者工具有问题,分包暂时需要有个页面来占位,不影响分包的的组件。

加上 "pages": "index"

页面内会先加载全局占位组件 page,这里特别写了 id page,在组件挂载时展示 loading。等异步组件加载好了,占位组件卸载,关闭 loading。传统方案一的 loading 刚出现时圆圈会卡住转不动,这里会很顺畅。

接着会加载分包的组件,首先把分包的 Page 换成 Component。更换后,原先页面加载的 onLoad 流程替换为自定义生命周期 login。

其它没有什么改动了,wxml 依然使用 page 组件。

page 组件是 scroll-view + 导航栏的封装,通过组件来处理下拉刷新、上拉加载行为。

对于页面分享的方法 onShareAppMessage,可以放在父包处理。不过用户能够首个打开的页面,建议放在主包中,以便得到更好的打开速度。

自定义生命周期的封装,原理是在 app.js 里,重写了 Page 和 Component 方法。

封装自定义生命周期,要注意的是 skyline 渲染模式下:

  1. 正常进入分包页面时,触发顺序为 onLoad,attached;
  2. 返回再次进入分包页面时,触发顺序为 attached,onLoad。

原因是返回再次进入时,不会加载占位组件。

webview 渲染模式则始终加载占位组件,触发顺序为 onLoad,attached。

相关推荐
data analyse 4566 分钟前
前端自建访问统计,访客标识怎么设计才稳?Cookie、本地存储与设备指纹的取舍
前端·数据分析
终端安全笔记11 分钟前
配置锁状态那一栏查的是什么:报告里几项各自指向什么风险
android·前端·安全·ios
恋猫de小郭20 分钟前
Kotlin Toolchain 0.13,JetBrains 推荐 KMP 都切换到到全新工具链
android·前端·flutter
我是人✓33 分钟前
Java面向对象核心特性深度解析
java·前端·算法
晓得迷路了38 分钟前
栗子前端技术周刊第 149 期 - Vite+ 1.0、Preact 11、Next.js 16.4...
前端·javascript·react.js
IT_陈寒39 分钟前
为什么我的Vue组件总是莫名其妙更新?
前端·人工智能·后端
狂师41 分钟前
2026年APP自动化测试工具大全,12款主流工具一次看懂
前端·开源·测试
前端一小卒1 小时前
搜索 API 额度用完返回空数组,Agent 就开始一本正经地胡说
前端·javascript·node.js
乘风gg1 小时前
Spec Kit vs OpenSpec vs Superpowers:三大 AI Coding 框架深度对比
前端·ai编程·claude
andrsted1 小时前
练题簿在线免费刷题:选择、填空、简答与排序,多种题型练出不同的掌握程度
学习·微信小程序·小程序·学习方法·刷题