uni-app的分包过程

最新推荐文章于 2025-04-01 11:00:28 发布
最新推荐文章于 2025-04-01 11:00:28 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： vue uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40994735/article/details/114112090
版权
网上关于uni-app分包的文章存在缺漏或表述不清的问题，实际上查看官方文档是较好的选择。文中给出了在manifest.json中启用分包和在pages.json文件中进行配置的官方文档参考链接。

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

网上各种分包文章很多，可是很多不是缺胳膊少腿就是不清不楚，实际上，看api文档是最好的选择之一：

1、manifest.json中启用分包，参考官方文档：

https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization

2、在pages.json文件中做如下配置，参考官方文档

https://uniapp.dcloud.io/collocation/pages?id=subpackages

前端 -- uni-app 的 splitChunks 分包详解与实战！
喵手的博客
04-15 1036
前端开发的小伙伴们，是不是经常被“大文件体积”压得喘不过气？尤其是做小程序开发的时候，直接被代码包大小限制卡得怀疑人生。没错，小程序的 2MB 限制真的让人痛彻心扉，难道我们的页面逻辑和功能就不配有点“分量”吗？别急！uni-app给了我们一个神奇的技能——splitChunks 分包。它不仅能让我们的代码“瘦身”，还可以让加载性能飞速提升。这篇文章就带你搞懂 splitChunks 的核心逻辑，并通过实战案例，让你轻松掌握这个利器。在 uni-app 的开发中，就像是一个神奇的分割器。
uni-app分包配置，导航配置
qq_41241504的博客
11-29 487
目录结构： 在pages.json中 顶部标题栏配置 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", }, 配置默认展示的界面的路径跟底部导航栏 路由配置： "pages": [ //pages数组中第一项表示应用启动页，参考：https:...
uniapp分包demo
11-03
uniapp多页面配置效果，项目代码subPackages 里的pages的路径是 root 下的相对路径，不是全路径。 微信、百度小程序每个分包的大小是2M，总体积一共不能超过8M。 支付宝小程序每个分包的大小是2M，总体积一共不能超过4M。 分包下支持独立的 static 目录，用来对静态资源进行分包。 uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明 针对vendor.js过大的情况可以使用运行时压缩代码 HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
uniapp----分包
一个努力不被优化的程序员
08-11 8964
分包开发一、什么是分包开发？有很多小伙伴一听分包开发认为就是多建几个文件夹，到时候引用就行了，说对对，但也不对，慢慢看下去就知道原因了：首先是官网的介绍：可能说的不是特别清晰，大概意思就是：创建文件，并在min.js中添加路径，并添加下载事件分包对于中、大型项目开发来说是非常有必要的，因为2MB根本做不了什么好看的项目，所以分包开发这个技术一定要会，可以不用但一定要知道怎么解决超出限制问题喜欢的小伙伴可以点个关注后续还会继续发布关于uniapp优化的文章。
uniapp分包（一开始完全没有分包的项目）
最新发布
weixin_72363836的博客
04-01 583
首先我们要知道为什么要分包，因为项目在最开始就会全部加载主包的内容，分包类似懒加载，打开了那个页面才加载，这样就优化了项目，打开时没那么卡，发布项目也没有太大导致发布失败。
uniapp中使用分包
yuansusu_的博客
04-25 4586
最后我们可以查看当前的主包和分包的体积，在微信开发者小程序的右上角的 详情-基本信息-本地代码-代码依赖中看到关系图，可以看到分包的体积节省了100多k，如果在详情将静态文件细分的情况，可以更少的减少主包的体积。做为小程序的首页，那么他能跳转的二级页面都放在一个分包中来加载（如下图的目录结构），这样不会加载多余的分包，也能提高加载分包的速度。在使用分包的配置后，我们会有主包和分包两个目录，这里主包和分包其实是有联系的，一般我们将主包中的页面，如。在构建小程序分包项目时，构建会输出一个或多个分包。
uniapp和小程序如何分包，详细步骤手把手（图解）_uni分包
2401_84296945的博客
04-28 6344
在pages.json中新建数组"subPackages"，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成，参数同pages；配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。app的分包，同样支持preloadRule，但网络规则无效。做这一步主要为了优化速度，不想优化速度的可以跳过这个配置。在对应平台的配置(manifest.json)下添加。大纲路线、讲解视频，并且后续会持续更新**
uniapp和小程序如何分包，详细步骤手把手（图解）
热门推荐
陈新科的博客
09-01 3万+
一、小程序分包 每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示 目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的
uni-app+uview+vuex+分包环境搭建
03-07
在配置文件中定义好主包和子包，然后按照规则组织代码，uni-app在编译时会自动处理分包逻辑。 【环境搭建】 在进行uni-app+uview+vuex+分包的项目开发前，首先需要安装和配置开发环境。这包括： 1. 安装Node.js：...
uni-app下载插件报错时plugins.7z
08-11
"uni-app下载插件报错时plugins.7z"这个文件名暗示了在下载或解压插件过程中出现了问题，特别是涉及到一个名为"plugins"的压缩包。本文将详细探讨uni-app下载插件可能遇到的问题以及解决策略。 首先，让我们理解uni...
uni-app 小程序分包
weixin_39357177的博客
01-27 1083
前言 微信小程序主包规定不能超过2M，当超过2M时候，可以通过分包的方式解决小程序体积限制的问题。微信小程序每个分包的大小是2M，总体积一共不能超过20M。如有更新，请参考uni-app官网 ???? 官网文档 下面是一个uni-app小程序项目 一、在pages的同级创建分包 二、在分包下创建页面pages目录，模块vue文件 *注意，配置的path路径是相对于root下的路径 三、pages.json增加subPackages配置 四、在manifest.json中开启分包优化 加入代码 "opt
uniapp打包成apk ---完整解压资源sdk
02-11
uniapp打包成apk ---解压资源sdk
使用uniapp开发小程序（分包处理）
weixin_62639453的博客
01-29 2803
使用uniapp开发小程序，在上传代码进行提交审核发布，会涉及到一个问题，就是小程序的大小有限制，不通过代码审核就发布不了。而分包是优化你代码大小的其中之一。：在配置分包路由和构建配置时，需要确保各个子包内部的资源路径配置正确，以便能够正确加载对应的资源文件。在大型项目中，可以根据功能模块将相关的页面和组件放入不同的分包中，便于团队协作和管理。将较少使用的页面或组件放入分包中，可以减少主包的体积，从而加快小程序的首次启动速度。总之，分包可以帮助优化小程序的性能，提高开发效率，并使得项目结构更加清晰和灵活。
如何在uniapp对页面进行分包处理
Front_Yue的博客
08-24 907
在使用分包功能时，需要合理使用，避免过度使用，同时需要注意维护好分包之间的依赖关系，确保分包的加载顺序正确。通过合理使用 uniapp 分包功能，可以提高应用的性能和用户体验，为用户带来更好的使用体验。
uni-app实现小程序分包
a3212768093的博客
09-26 1090
uni-app如何对微信小程序分包
UNI-APP 分包使用(详解与实战)
码海扬帆：前端探索之旅的博客
03-02 2916
4、在pages.json中创建"subPackages"数组，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成（参数同pages）；js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。
uniapp分包
王二的博客
10-30 1345
在 src 目录下创建一个名为 subpackages 的文件夹，用于存放分包的代码。
详解uniapp 微信小程序分包
请告诉他
05-07 3192
先上官网说明：uni-app官网 实操：主要分为以下3步 一、需要加入下面这段代码 "optimization" : { "subPackages" : true }, 代码具体位置 以上操作，是启用分包 二、接下来就要创建分包模块：官网实例分包结构如下 按照官网结构创建如下 三、需要在 pages.json 中填写：官网示例 按照官网创建页面并填写 上面三步按照官网配置完成，下面启动项目看看效果，在主包的...
uniapp一写就成功的分包的方法
qq_51463650的博客
01-03 1676
在pages.json里，将代码写到下面这个位置，特别注意的是root后面的代码应该和第一步新建的文件夹名称一致，否则以后会找不到这个分包。例如pages-index（在我的项目中是首页的分包），你需要几个你就写几个就可以了。”，点击右侧红框中的主包，如果下面出现你刚刚新建的文件，就证明你成功啦。例如我的红框中新增的是pages-index，说明pages-index（首页）的分包成功了。我在项目下新建了5个分包，并且以pages-开头来命名，方便日后自己一眼就看出这几个文件夹是分包。
uni-app分包
03-08
### uni-app 分包配置方法 在 `manifest.json` 文件中，通过点击源码视图并编辑 `"mp-weixin"` 字段来启用分包功能。具体来说，在该字段下添加如下代码可以开启分包支持： ```json { "optimization": { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圣京都

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值