【uniapp】小程序中的资源分包处理

已于 2022-08-25 12:06:00 修改
阅读量3.3k 收藏 4
点赞数
分类专栏： uni-app 文章标签： uni-app 小程序 前端
于 2022-08-25 12:04:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ONLYSRY/article/details/126521497
版权
当小程序源码资源过大导致无法打包时，可通过分包解决。本文介绍如何配置pages.json实现分包，并展示了具体示例，包括页面跳转及静态资源引用的方法。

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

源码资源过多时超过2M将会无法打包上传，这时就得使用分包处理。

官网链接：使用分包 | 微信开放文档

每一个分包可以拥有自己独立的static静态资源文件夹。

 pages.json文件配置：

"subPackages": [{
		"root": "pagesA",
		"pages": [{
			"path": "briefIntroduction/briefIntroduction",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom",
				"disableScroll"
最低0.47元/天 解锁文章
uniapp开发微信小程序预加载分包
m0_66879773的博客
06-13 846
微信小程序总体积不得大于20M，主包（共同文件+静态资源）也不得超过2M。
uniapp小程序分包+预加载
2201_75829410的博客
04-02 2203
血泪史 分包越早越happy
uniapp项目如何分包
gcyaozuodashen的博客
03-16 3366
uniapp分包
uni-app填坑指南——解决处理处理静态资源的问题
【蜀山风行】的专栏
09-06 2690
如何为uni-app打补丁，补足其对于静态资源处理的短板。
uniapp开发微信小程序时怎么分包，详细教程
最新发布
分享小程序、h5、中后台的内容和问题解决方法
02-14 1077
我们用uniapp开发微信小程序时，几乎每个开发者都会在真机调试环节遇到包体积过大无法进行模拟的问题。微信小程序官方规定每个包的大小不能超过2MB。如果超过这个体积这时候我们就需要去分包了，分包的意思就是把你当前体积过大的包分成若干个子包，避免单一包过大的情况，下面有详细代码，帮你解决这个问题~
uniapp分包demo
11-03
uniapp多页面配置效果，项目代码subPackages 里的pages的路径是 root 下的相对路径，不是全路径。 微信、百度小程序每个分包的大小是2M，总体积一共不能超过8M。 支付宝小程序每个分包的大小是2M，总体积一共不能超过4M。 分包下支持独立的 static 目录，用来对静态资源进行分包。 uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明 针对vendor.js过大的情况可以使用运行时压缩代码 HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
Uniapp开发微信小程序分包，分包使用分包内的静态资源
vayne_1的博客
08-28 2116
Uniapp开发微信小程序分包，分包使用分包内的静态资源
uniapp-微信小程序如何分包-以及-静态文件占用空间过多的解决方式
LCKNOW的博客
03-26 2360
1.用uniapp制作微信小程序如何分包，2.如何解决静态文件占用空间过多的情况~
UNI-APP 分包使用(详解与实战)
码海扬帆：前端探索之旅的博客
03-02 2819
4、在pages.json中创建"subPackages"数组，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成（参数同pages）；js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。
uniapp中使用分包
yuansusu_的博客
04-25 4437
最后我们可以查看当前的主包和分包的体积，在微信开发者小程序的右上角的 详情-基本信息-本地代码-代码依赖中看到关系图，可以看到分包的体积节省了100多k，如果在详情将静态文件细分的情况，可以更少的减少主包的体积。做为小程序的首页，那么他能跳转的二级页面都放在一个分包中来加载（如下图的目录结构），这样不会加载多余的分包，也能提高加载分包的速度。在使用分包的配置后，我们会有主包和分包两个目录，这里主包和分包其实是有联系的，一般我们将主包中的页面，如。在构建小程序分包项目时，构建会输出一个或多个分包。
关于uniapp小程序的分包问题
coding...
02-28 3235
由于使用插件默认会导入到uni_modules文件夹下，根目录下的uni_modules和components下的文件打包时会全部默认打包到主包中，那么这些插件和公共组件也需要分包处理，分包需要的插件可以放置到分包的目录下，分包下创建components文件，放入分包页面所用到的公共组件。对于uni_modules中的插件，如果是页面单独使用，那么可以放在对应分包里的页面文件下单独引入即可。如果分包公共使用的放在分包下的components文件夹下引入使用即可。分包也可以分多个，按照实际情况分包即可。
uniapp如何分包 & 分包配置后无法读取static文件夹
热门推荐
谨言不言☞博客
04-27 2万+
最近因为使用uniapp做小程序，所以后面在程序发布预览时，经常出现：微信小程序Error系统错误,source size 2126KB exceed max limit 2MB等问题； 而我最初的解决方案是使用压缩工具的； 但是在后来随着文件图片增多，这种方案的弊端就很明显了； 故而，就想到了分包。 1. 什么是分包？ 因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。 所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS.
uniapp 项目分包
shi304664189的博客
08-30 438
最近在使用uniapp开发微信小程序，随着项目需求的增加，代码包也越来越大，所以不可避免的要进行分包，特此记录下分包过程。1、首先，在pages同级目录中，创建分包文件夹如helperPages,如图。tips:分包后直接引入static静态资源中图片，提示找不到。其中pages放置页面组件，static内为静态图片文件。然后在根目录下创建vue.config.js 文件。选中manifest.json文件，选择源码视图。其次，在对应平台配置下添加分包优化。在page.json文件中添加。
uniapp和小程序如何分包，详细步骤手把手（图解）_uni分包
2401_84296945的博客
04-28 6284
在pages.json中新建数组"subPackages"，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成，参数同pages；配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。app的分包，同样支持preloadRule，但网络规则无效。做这一步主要为了优化速度，不想优化速度的可以跳过这个配置。在对应平台的配置(manifest.json)下添加。大纲路线、讲解视频，并且后续会持续更新**
uniapp打包静态资源优化
weixin_50606255的博客
11-01 5062
HBuilderx打包是对包的大小有限制的，一般不能超过40M，超过40M则需要缴费打包，好像十块钱一次，虽然不贵，但是长此以往也是一笔不小的费用，且不是解决根源问题的处理方式。 此时，没钱的前端只好想法设法地压缩包的大小，为此我找了很多方法，记录于此： 仔细地观察了文件中比较大比较占资源的就是图片和字体文件所占的比重较大，代码基本都很小，所以应当将优化静态资源作为优化方向。 方法1：分包 参考官网：uni-app官网 我做的是app，官网说明不支持app和h5的分包设置，只支持几个小程序。。.
uni-app微信小程序分包处理
weixin_42543235的博客
05-19 2920
场景 由于微信小程序规定不能超过2M，在做了精简优化代码之后还是太大了，无法上传代码怎么办？使用官方支持的分包来解决。 官方文档：https://uniapp.dcloud.io/collocation/pages?id=subpackages subPackages里的pages的路径是root下的相对路径，不是全路径。 微信小程序每个分包的大小是2M，总体积一共不能超过16M。 百度小程序每个分包的大小是2M，总体积一共不能超过8M。 支付宝小程序每个分包的大小是2M，总体积一共不能...
uni-app 分包
jifaliwo123的博客
09-14 3804
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。当用户进入分包的某个页面时，再去下载对应的整个分包，然后再显示该页面。【解决】如果使用了uni-app的导入uni_modules方式导入组件，那么就会有这个情况。大多情况下，我们需要对主包进行瘦身——分包，把不属于公共的组件，不是属于小程序主体页面的模块分出去。
uniapp把static打成分包并使用
weixin_47072581的博客
07-07 862
背景：部分图片只在页面A使用，若全部作为主包，Uniapp编译成小程序预览时上传失败，故考虑拆包。注：跳回的主包页面为tab页（tab页只能为主包页面）step2：新建目录（pages里为页面A）step4：页面A使用static里的图片。step1：配置manifest.json。step3：pages.json注册。step6：页面A跳回到主包页面。step5：主包页面跳到页面A。
uniapp上传静态资源图片以及使用（拿捏）
weixin_64974600的博客
12-30 1867
uniapp分包优化，上传服务器图片进行引用
uniapp小程序静态资源分包
08-12
UniApp 小程序中可以通过静态资源分包来优化小程序的加载速度和减少包体积。静态资源分包将一些较大的资源文件单独打包成一个或多个 subpackages，可以在需要的时候再动态加载。以下是实现静态资源分包的步骤： 1. 在项目根目录下找到 `manifest.json` 文件，如果不存在则手动创建。 2. 在 `manifest.json` 文件中添加 `"subPackages"` 字段，用来配置静态资源分包的信息。例如： ```json "subPackages": [ { "root": "subPackageA", "pages": [ "pages/subPackageA/index", "pages/subPackageA/detail" ] }, { "root": "subPackageB", "pages": [ "pages/subPackageB/index", "pages/subPackageB/detail" ] } ] ``` 上述代码定义了两个静态资源分包 `subPackageA` 和 `subPackageB`，每个分包下可以指定多个页面路径。 3. 创建对应的分包目录，例如在 `src` 目录下创建 `subPackageA` 和 `subPackageB` 目录。 4. 将对应的页面文件放入分包目录下的对应位置，例如将 `index.vue`
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值