uni小程序分包教程

最新推荐文章于 2025-06-10 08:50:44 发布

原创最新推荐文章于 2025-06-10 08:50:44 发布 · 417 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #java #uni-app

一、什么是小程序分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

二、为什么使用分包

小程序第一版的程序总代码不能超过20MB大小，分包以后单独包/主包最大不能超过2M，整个小程序所有分包大小不超过8M。

三、分包后项目的构成

分包后，小程序项目由1个主包+多个分包组成；

主包：一般只包含项目的启动页面或TabBar页面，以及所有分包都需要用到的一些公共资源。

分包：只包含和当前分包有关的页面和私有资源。

四、分包的加载规则

在小程序启动时，默认会下载主包并启动主包内页面
TabBar页面需要放到主包中
当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后在进行展示

五、分包的步骤

第一步：在manifest.json项目的配置文件中，开启分包

第二步：在目录中建立分包目录，与pages同级

第三步：在pages.json文件中，添加SubPackages字段进行分包设置。位置放到pages数组后面

第四步：将次要路由放到相应分包目录中，并将路径移动到此分包中。如上图。

第五步：修改主页面index中的跳转路径，将路径改成相应的分包路径

第六步：修改其他页面的跳转路径：

第七步：分包预加载可自行选择。

至此，分包操作完成啦！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

进击的女IT

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

uni-app 小程序分包

weixin_39357177的博客

01-27

1103

前言微信小程序主包规定不能超过2M，当超过2M时候，可以通过分包的方式解决小程序体积限制的问题。微信小程序每个分包的大小是2M，总体积一共不能超过20M。如有更新，请参考uni-app官网 ???? 官网文档下面是一个uni-app小程序项目一、在pages的同级创建分包二、在分包下创建页面pages目录，模块vue文件 *注意，配置的path路径是相对于root下的路径三、pages.json增加subPackages配置四、在manifest.json中开启分包优化加入代码 "opt

微信小程序--如何分包

weixin_47037550的博客

04-29

5883

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。一个小程序中可以有多个独立分包。限制独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。

参与评论您还未登录，请先登录后发表或查看评论

uniapp和小程序如何分包，详细步骤手把手（图解）_uni分包

2401_84296945的博客

04-28

6688

在pages.json中新建数组"subPackages"，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成，参数同pages；配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。app的分包，同样支持preloadRule，但网络规则无效。做这一步主要为了优化速度，不想优化速度的可以跳过这个配置。在对应平台的配置(manifest.json)下添加。大纲路线、讲解视频，并且后续会持续更新**

uniapp开发微信小程序---分包

热门推荐

陈新科的博客

09-01

3万+

一、小程序分包每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示目前小程序分包大小有以下限制：整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的

uniapp中使用分包

yuansusu_的博客

04-25

4832

最后我们可以查看当前的主包和分包的体积，在微信开发者小程序的右上角的详情-基本信息-本地代码-代码依赖中看到关系图，可以看到分包的体积节省了100多k，如果在详情将静态文件细分的情况，可以更少的减少主包的体积。做为小程序的首页，那么他能跳转的二级页面都放在一个分包中来加载（如下图的目录结构），这样不会加载多余的分包，也能提高加载分包的速度。在使用分包的配置后，我们会有主包和分包两个目录，这里主包和分包其实是有联系的，一般我们将主包中的页面，如。在构建小程序分包项目时，构建会输出一个或多个分包。

uniapp和小程序如何分包，详细步骤手把手（图解，前端高级开发岗必问知识点

2401_83621095的博客

03-19

3165

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。分包里的components是单个分包自己的组件目录，分包vue页面的引用只能是在自己page_zhaoshang分包目录下才可以引用。最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。

uni-app实现小程序分包

a3212768093的博客

09-26

1141

uni-app如何对微信小程序分包

uniapp微信小程序分包

ITshayebuhui的博客

07-02

1920

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。当我们微信小程序太大的时候，我们上传小程序体验版会失败，因为小程序上传，这个时候我们可以试试分包操作，所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；做这一步主要为了优化速度，不想优化速度的可以跳过这个配置。1.我们先来看下官方文档给出的目录结构。每个使用分包小程序必定含有一个。则是根据开发者的配置进行划分。3.我就以自己的小程序为例。

uniapp微信小程序分包处理

youhebuke225的博客

08-18

1721

在uni-app中，为了优化小程序的加载速度和提升用户体验，特别是当小程序代码量较大时，可以使用微信小程序的分包加载功能。分包加载允许将小程序代码拆分成不同的包，在用户初次启动时按需加载。

hbuilderx 小程序分包_基于uni-app的微信小程序之分包

weixin_39846898的博客

12-22

644

作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒0. 缘由最近工作在接触uni-app,用它来开发微信小程序,也是第一次接触,找了很久,还有大佬用自己写的函数做的,俺觉得我不会也不配,刚好看到下面评论是官方也支持了,所以就用官方的了,这里记录一下1. 关于分包好像是规定小程序不能超过2M,一旦超过就需要分包,因为是公司项目,肯定超过,所以就做个演示,权当记录吧1.0 这是官方文档1.1 注...

uniapp分包demo

11-03

uniapp多页面配置效果，项目代码subPackages 里的pages的路径是 root 下的相对路径，不是全路径。微信、百度小程序每个分包的大小是2M，总体积一共不能超过8M。支付宝小程序每个分包的大小是2M，总体积一共不能超过4M。分包下支持独立的 static 目录，用来对静态资源进行分包。 uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明针对vendor.js过大的情况可以使用运行时压缩代码 HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码

uniapp开发微信小程序分包问题

故里2130

03-30

874

当我们开发完成小程序后，上传时，出现上传失败，此时就需要我们进行分包处理。5.1这里我配置的就是pages的，里面1个首页，2个tabBar页。此时，这里就出现了主包和分包，就已经表示分包完成了。除过第一个pages，后面4个都是要进行分包的。pages里面，必须放首页和tabBar的页面。5.2剩下的4个分包，都按照这个格式进行配置。可以看到都是主包，表示没有进行分包处理。后面的4个都是分包，分别当做一个整体包。参考第一个，就可以配置其他页面了。我们可以点击本地代码，进行查看。

uniapp小程序分包+预加载

2201_75829410的博客

04-02

2480

血泪史分包越早越happy

uni-app 之分包

weixin_43845137的博客

06-13

657

分包

微信小程序---分包

weixin_46218456的博客

01-20

1万+

分包

Uni分包/小程序分包

Twoknives的博客

03-30

610

一直懒得研究分包，结果还是躲不掉。先说目录结构，按官方的来就好了，主包然后是分包，而且tabBar 页面必须在 app（主包）内接着是pages.json，基本按官方给出的就好了，还是很简单 { "pages": [{ "path": "pages/index/index", "style": { ...} }, { "path": "pages/login/login", "style": { ...} }],

uniapp 分包

weixin_59685936的博客

03-16

839

uniapp 分包

一文教你小程序分包，简单易学！

CRMEB小程序商城的博客

01-08

4130

顾名思义，独立分包就是可以独立运行的分包。举个例子，如果你的小程序启动页面是分包（普通分包）中的一个页面，那么小程序需要优先下载主包，然后再加载普通分包，因为普通分包依赖主包运行。但是如果小程序从独立分包进入进入小程序，则不需要下载主包，独立分包自己就可以运行。普通分包所有的限制对独立分包都有效。分包是为了解决小程序超过2m无法上传的问题分包依赖于主包，进入分包页面，主包必然需要优先被加在主包和分包同时引用一个依赖或资源，则当前依赖或资源会被打入到主包。

uni-app小程序分包加载

01-28

### uni-app 小程序分包加载实现方法 #### 配置 `pages.json` 文件为了实现小程序的分包加载，需在项目的根目录下编辑 `pages.json` 文件。此文件用于定义应用的页面路径以及窗口表现。对于分包设置而言，主要关注的是 `subPackages` 或者 `subpackages` 字段。 ```json { "pages": [ { "path": "index/index", "style": {} } ], "globalStyle": {}, "subPackages": [ { "root": "packageA", // 子包名 "pages": [ { "path": "page1/page1" }, { "path": "page2/page2" } ] } ] } ``` 上述 JSON 片段展示了如何声明一个名为 `packageA` 的子包及其内部包含的具体页面[^3]。 #### 创建分包结构按照所设定的 `root` 属性创建对应的文件夹作为各个独立的分包单元。每个分包都应有自己的入口页面和其他必要的资源文件（如 JavaScript、CSS 及图片）。例如： ``` project-root/ ├── pages/ │ └── index.vue (主包中的首页) └── packageA/ ├── page1/ │ └── page1.vue └── page2/ └── page2.vue ``` 这种布局有助于保持项目清晰有序，并使得不同部分可以被单独打包和管理[^4]。 #### 访问分包内的资源当访问某个位于分包里的页面时，框架会自动按需下载该分包的内容而不影响其他未涉及的部分。这意味着只有当用户导航到特定分包中的某一页时才会触发相应数据请求，进而减少了初次启动所需的时间开销并提高了整体用户体验[^1]。 #### 处理跨平台兼容性值得注意的是，虽然这里讨论的重点在于微信小程序环境下的实践操作，但是利用 UniApp 开发工具构建的应用同样适用于其他主流的小程序平台——包括但不限于 QQ 小程序、百度智能小程序等。因此，在实际开发过程中应当遵循官方文档给出的最佳做法以确保良好的多端适配效果[^2]。