uniapp微信小程序分包

最新推荐文章于 2025-05-04 16:53:31 发布
最新推荐文章于 2025-05-04 16:53:31 发布
阅读量510 收藏
点赞数
分类专栏： 小程序学习笔记 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/i96249264_bo/article/details/118766377
版权
本文详细介绍了在uniapp中进行微信小程序分包的过程，包括如何配置manifest.json以启用分包优化，创建subPackages目录结构，以及设置正确的路由配置。案例中将小程序分为Personal、Property和Community三个包，分别对应不同的页面模块。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

描述

本篇文章主要讲解uniapp开发微信小程序时的分包过程。这里使用的案例是工作时的一个项目，这里我分了三个包，分别为：Personal、Property、Community，分别表示小程序tebar对应的三个页面，每个包下面有相应的其他页面。

目录结构

pages目录下面存放的是三个底部导航栏的页面和登录页面

在这里插入图片描述在这里插入图片描述

操作

  1. 进行分包相关的配置。点击mainfest.json文件，接着点击源码试图，然后将添加截图中的代码。
    2在这里插入图片描述
"app-plus": {
	  "optimization": {
		"subPackages": true
	  },
	  "runmode" : "liberate" // 开启分包优化后，一定要配置一下资源释放模式
	}
  1. 在与pages文件的同级下，建立一个subPackages文件，如下图
    在这里插入图片描述
  2. 配置路由
    以下截图为路由的结构
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
uni-app做微信小程序的分包处理
forever__fish的博客
02-15 5224
我们的都知道微信小程序有随即随用，用完即走的优点，并且它开发门槛低，但是它也有一个致命的缺点，就是代码包体积的限制，这一缺点让小程序的开发有了一定的限制，现在有一方法可以减少代码包的体积，能够让小程序的功能得到一定的扩展，这一方法就是——分包。
uniapp开发微信小程序时怎么分包，详细教程
分享小程序、h5、中后台的内容和问题解决方法
02-14 1790
我们用uniapp开发微信小程序时，几乎每个开发者都会在真机调试环节遇到包体积过大无法进行模拟的问题。微信小程序官方规定每个包的大小不能超过2MB。如果超过这个体积这时候我们就需要去分包了，分包的意思就是把你当前体积过大的包分成若干个子包，避免单一包过大的情况，下面有详细代码，帮你解决这个问题~
uniapp开发微信小程序时如何进行分包（新手图文）
最新发布
青茶
05-04 1200
我们在进行uniapp微信小程序开发的时候，每次上传都提示包太大，主包大小不能超过 2M，这就很头疼，这个时候，唯一的解决方案就是分包了，那如何进行分包呢？
uniapp开发微信小程序使用分包
lxs19930928的博客
01-06 759
为什么使用分包 因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，按需加载，优化小程序的下载和启动速度。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。 详情参考uniapp官网subPackages 项目目录 package.json { "pages": [{ "path": "pages/index/index", "style": { "navigat
Uniapp微信小程序分包
yanling_061的博客
08-17 583
2. 配置pages.json， 新增"subPackages": []数组，分别配置root属性和pages属性，root是分包的名称，pages接收分包下的页面配置，配置写法等同于上级的pages。## 额外的还可以配置在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。- 主包，用来放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本。- 分包，其他除了启动页面/TabBar页面外的页面，和每个分包页面下所需要使用的组件。......
uniapp开发微信小程序分包问题
故里2130
03-30 778
当我们开发完成小程序后，上传时，出现上传失败，此时就需要我们进行分包处理。5.1这里我配置的就是pages的，里面1个首页，2个tabBar页。此时，这里就出现了主包和分包，就已经表示分包完成了。除过第一个pages，后面4个都是要进行分包的。pages里面，必须放首页和tabBar的页面。5.2剩下的4个分包，都按照这个格式进行配置。可以看到都是主包，表示没有进行分包处理。后面的4个都是分包，分别当做一个整体包。参考第一个，就可以配置其他页面了。我们可以点击本地代码，进行查看。
uniapp 微信小程序异步调用分包的自定义组件
liuye066的专栏
05-10 1390
在微信开发者工具的模拟器上测试，能调用成功，显示正常，但真机调试时，组件不显示，控制台报错Component is not found in path "subTaixin/measureHeart/moreFun" (using by "pages/index/index")；需求：在分包subTainxin中创建自定义组件moreFun.vue，需要在主包的pages/index/index页面调用该自定义组件。2.1 在pages/index/index.vue中。上传到体验版上，扫码测试时又正常。
uniapp 微信小程序开启分包
li2406608527的博客
01-21 872
首先在小程序相关配置目录下开启小程序分包模式（optimization配置）。 /* 小程序特有相关 */ "mp-weixin" : { "appid" : "wxa6774d5dab610aab", "setting" : { "urlCheck" : false, "minified" : true }, "usingComponents" : true, "
uniapp和小程序如何分包，详细步骤手把手（图解）_uni分包
2401_84296945的博客
04-28 6370
在pages.json中新建数组"subPackages"，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成，参数同pages；配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。app的分包，同样支持preloadRule，但网络规则无效。做这一步主要为了优化速度，不想优化速度的可以跳过这个配置。在对应平台的配置(manifest.json)下添加。大纲路线、讲解视频，并且后续会持续更新**
uniapp-微信小程序 分包--详解
ZGG的博客
11-07 6128
uniapp 微信小程序 分包 详解 分包优化 小程序超过2M
uniapp微信小程序-分包（一看就懂）
apple_70049717的博客
01-31 2860
微信小程序每个分包的大小是2M，总体积一共不能超过20M,当然你也可以提升启动速度，降低首次加载时间，模块化开发，按需加载，提高性能。
使用uniapp框架开发微信小程序的分包具体流程
weixin_47491045的博客
03-01 791
分包能够解决小程序的加载缓慢的问题，能够实现微信小程序的按需加载。
使用uniapp开发小程序（分包处理）
weixin_62639453的博客
01-29 2828
使用uniapp开发小程序，在上传代码进行提交审核发布，会涉及到一个问题，就是小程序的大小有限制，不通过代码审核就发布不了。而分包是优化你代码大小的其中之一。：在配置分包路由和构建配置时，需要确保各个子包内部的资源路径配置正确，以便能够正确加载对应的资源文件。在大型项目中，可以根据功能模块将相关的页面和组件放入不同的分包中，便于团队协作和管理。将较少使用的页面或组件放入分包中，可以减少主包的体积，从而加快小程序的首次启动速度。总之，分包可以帮助优化小程序的性能，提高开发效率，并使得项目结构更加清晰和灵活。
uniapp小程序分包
Summer_JK的博客
07-01 604
分包原因：由于微信小程序包总体积不能超过2M，这时就需要把代码进行分包处理。主包：即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。分包后的每个分包的大小是2M以内，总体积一共不能超过20M。subPackages：分包加载配置，此配置为小程序的分包加载机制，详细请参考uniapp官网分包机制项目目录结构如下：需要在 pages.json 中进行代码分包处理： preloadRule：配置preloadRule后，在进入小
uni-app小程序分包详细步骤~（保姆级）
m0_62626838的博客
07-21 1293
1、首先需要明白小程序的主包是pages文件夹，当我们需要分包时，将主包的pages文件夹中的页面文件按需剪切至一个新的文件夹中（例如我们在根目录下新建一个pageA文件夹，里面新建一个pages文件夹，此时将页面文件剪切至此）于是小程序提供了分包的解决方法，将一个完整的的小程序，在打包时分成不同功能或需求的分包，在用户使用时再加载对应的分包。2、按需将static的静态文件也赋值到pageA中（静态文件按需保留，该分包中未使用到的静态文件删除掉即可）4、修改uniapp关于改分包页面文件的路由跳转路径。
uniapp 微信小程序分包
03-21
### 关于 UniApp 微信小程序分包加载 在 UniApp 开发中，为了优化微信小程序的性能并减少主包体积，可以采用 **分包机制**。通过合理配置分包结构，能够显著提升应用启动速度和用户体验。 #### 配置分包的方法 在 `manifest.json` 文件中的 “小程序” 设置部分，找到 “分包设置”，启用分包功能即可。具体操作如下： 1. 打开项目的根目录下的 `manifest.json` 文件。 2. 转到 “小程序” -> “分包设置” 页面。 3. 启用分包选项，并定义子包路径及其入口页面。 以下是官方文档提到的关键点[^1]： - 主包是指默认包含的应用程序核心逻辑以及未分配至任何子包的内容。 - 子包则指独立打包的部分模块或页面集合，只有当访问这些特定页面时才会被动态加载。 #### 示例代码展示 假设有一个简单的项目结构需要分为两个子包：“商品详情页” 和 “个人中心”。可以在 `pages.json` 中这样声明： ```json { "subPackages": [ { "root": "packages/goods", "pages": ["goodsDetail/index"] }, { "root": "packages/user", "pages": ["profile/index", "settings/index"] } ] } ``` 上述 JSON 数据表示创建了两组子包： - 商品相关的页面位于 `/packages/goods/...`. - 用户相关页面存放在 `/packages/user/...`. 注意，在实际开发过程中还需要确保各子包内的资源文件均能正常引用且无冲突情况发生。 #### 动态加载插件实例 如果希望进一步扩展功能比如引入第三方评论组件，则可参考以下方式完成初始化工作[^2]: ```javascript // 假设此函数是在某个业务场景下触发执行 function loadAndUseCommentPlugin() { const plugin = requirePlugin("wxacommentplugin"); if (!plugin) return; plugin.openComment({ success(res){ console.log('成功打开评价界面:', res); }, fail(err){ console.error('未能正确开启评价窗口:', err); } }); } export default {loadAndUseCommentPlugin}; ``` 以上脚本片段展示了如何安全地调取已安装的小程序插件 API 接口来增强应用程序的功能特性。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值