2024 最新基于Uni-app和Vue3实现微信小程序分包，并且主包调用分包页面作为组件加载，包括优化预加载-详细教程和使用

文章目录

• 目录

  文章目录

  安装流程

  小结

  ---

  • 概要
  • 安装流程
  • 技术细节
  • 小结

概要

微信小程序的分包功能主要用于优化小程序的加载速度和性能，具体作用包括：

1. 减小主包体积：通过将小程序的部分页面和资源分离到分包中，可以减少主包的体积，从而加快小程序的启动速度。

2. 按需加载：用户访问特定功能时，才加载对应的分包，这样可以节省用户的网络流量和时间，提高用户体验。

3. 提高性能：分包加载可以减轻主包的压力，使得小程序在运行时更加流畅，尤其是在资源较多的情况下。

4. 模块化管理：开发者可以将小程序的功能模块化，便于管理和维护，提高代码的可读性和可维护性。

5. 支持更大规模的应用：通过使用分包，小程序能够支持更多的页面和功能，适应复杂业务需求。

总之，分包在微信小程序开发中具有重要的作用，不仅提升了性能，还改善了用户体验。

可以参考官方提供的文档说明

1.为啥要分包 官方文档有说明可阅读：小程序性能优化指南 | 微信开放社区

2.微信小程序官方文档：使用分包 | 微信开放文档

3.Uni-app官方文档讲解配置：pages.json 页面路由 | uni-app官网

分包的具体流程使用

1. 分包结构设置

2. 主包中调用分包页面

3. 优化预加载

4. 组件化开发

根据自己选择可以感受下官方提供的内容，运行查看下效果教程如下（这步如果自己感觉不需要可以跳过这个教程使用，下滑到教程流程）

（1）运行微信小程序官方提供的数据内容，测试

点击微信小程序官方文档：使用分包 | 微信开放文档

注意事项，子包和子包之间是有限制，不能完全互通

运行查看效果，感受下

以上就是官方的效果，现在下滑页面开始正式教程

配置微信开发者工具和创建项目教程

待补充。有需要可以留言作者或者私信作者的公众号《全栈鍾猿》

基于Uni-app Vue3实现微信小程序教程流程

1. 分包结构设置 教程

官方文档，需要创建一个项目文件下的目录

pages.json 页面路由 | uni-app官网

说明：由于作者想在pages主包同级目录下创建子包来实现，所以你们根据需要来操作。

也可以在pages主包下配置目录文件为子包，不需要跟随作者创建目录文件了，直接下滑到第一步：配置manifest.json文件

下面是创建目录教程

创建成功的目录，目录名称可以自定义，然后在创建子级目录

目录结构如图所示

第一步：配置manifest.json文件

官方文档说明：manifest.json 应用配置 | uni-app官网

 

配置内容如下

"optimization": {
			"subPackages": true
		}

第二步：配置pages.json

点击这个链接跳转

配置小程序分包加载配置 root分包的目录名称，可以自定义包名

补充说明：如果目录不是在当前项目主包pages同级目录，那么root：”xx/目录名“ 的方式

但是生成的vue文件不是在我创建的目录的下，编辑器工具有问题。接下来我们手动生成

手动创建vue页面并且配置路由加载

以上的步骤就是配置好并且分包成功的步骤了，

接下来验证项目分包结构，保存项目文件，并且重新运行启动微信开发者工具

如图所示就是分包成功了

2. 主包中调用分包页面

语法：

uni.navigateTo({
  url: '../../subPackageLinkman/pages/doctor_linkman/index'
});

3. 优化预加载

官方文档地址：pages.json 页面路由 | uni-app官网

"preloadRule": {
		"pages/index/index": 
		{
			"network": "all", 
			"packages": ["subPackageLinkman"] 
		}
	},

重启运行微信开发者工具，如图所示在控制台输出信息就执行成功了预加载配置

4. 组件化开发

微信官方文档说明 占位组件 | 微信开放文档

配置pages.json文件

注册组件

在主包pages/linkman/index.vue页面引用分包的组件如图所示

分包的内容

如图所示配置成功

技术细节

1.分包结构

 说明如果需要在app运行分包，配置如图所示

第二步：配置pages.json

手动创建vue页面，鼠标右键目录文件--新建

小结

有任何问题可以私信作者也可以帮你解答或者关注作者的公众号《全栈鍾猿》私信作者