uniapp分包流程

最新推荐文章于 2024-08-20 15:57:57 发布
最新推荐文章于 2024-08-20 15:57:57 发布
阅读量653 收藏 1
点赞数
文章标签： 前端 vue.js uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37125233/article/details/124631896
版权
本文介绍了如何解决uniapp小程序因体积过大而进行分包处理的问题。通过在pages.json中配置`subPackages`，指定子包的根目录和包含的页面，可以实现分包。同时提到了微信小程序可在manifest.json中开启分包优化。每个分包大小限制为2M，总大小不超过16M。作者邀请读者交流分包经验，共同进步。
摘要由CSDN通过智能技术生成

最近刚解决一个uniapp分包的问题，写个文章，加深一下印象

因小程序规定无法超过2m，所以有些时候需要分包来处理，解决过大问题！

在项目pages.json中新增数组"subPackages"，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成，参数同pages；

微信小程序可通过manifest.json下添加"optimization":{"subPackages":true}开启分包优化

注意：微信小程序每个分包的大小是2M，总体积一共不能超过16M。

多个分包暂时没有尝试，不知道行不行，emmmm

有问题欢迎大家一起沟通交流，一起进步

咕谷古顾故
关注
2024年最新uniapp和小程序如何分包，详细步骤手把手（图解）_uni分包(1)，1-3年网络安全开发工程师面试经验分享
2301_79985178的博客
05-06 1730
本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！
uniapp分包demo
11-03
uniapp多页面配置效果，项目代码subPackages 里的pages的路径是 root 下的相对路径，不是全路径。 微信、百度小程序每个分包的大小是2M，总体积一共不能超过8M。 支付宝小程序每个分包的大小是2M，总体积一共不能超过4M。 分包下支持独立的 static 目录，用来对静态资源进行分包。 uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明 针对vendor.js过大的情况可以使用运行时压缩代码 HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
uniapp----分包
一个努力不被优化的程序员
08-11 5679
分包开发一、什么是分包开发？有很多小伙伴一听分包开发认为就是多建几个文件夹，到时候引用就行了，说对对，但也不对，慢慢看下去就知道原因了：首先是官网的介绍：可能说的不是特别清晰，大概意思就是：创建文件，并在min.js中添加路径，并添加下载事件分包对于中、大型项目开发来说是非常有必要的，因为2MB根本做不了什么好看的项目，所以分包开发这个技术一定要会，可以不用但一定要知道怎么解决超出限制问题喜欢的小伙伴可以点个关注后续还会继续发布关于uniapp优化的文章。
一文教你Uniapp和小程序如何优雅分包
最新发布
weixin_45734165的博客
08-20 432
js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。分包里的components是单个分包自己的组件目录，分包vue页面的引用只能是在自己page_xxxx分包目录下才可以引用。配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。
uniapp中使用分包
yuansusu_的博客
04-25 3935
最后我们可以查看当前的主包和分包的体积，在微信开发者小程序的右上角的 详情-基本信息-本地代码-代码依赖中看到关系图，可以看到分包的体积节省了100多k，如果在详情将静态文件细分的情况，可以更少的减少主包的体积。做为小程序的首页，那么他能跳转的二级页面都放在一个分包中来加载（如下图的目录结构），这样不会加载多余的分包，也能提高加载分包的速度。在使用分包的配置后，我们会有主包和分包两个目录，这里主包和分包其实是有联系的，一般我们将主包中的页面，如。在构建小程序分包项目时，构建会输出一个或多个分包。
uniapp和小程序如何分包，详细步骤手把手（图解）_uni分包
2401_84296945的博客
04-28 4920
在pages.json中新建数组"subPackages"，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成，参数同pages；配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。app的分包，同样支持preloadRule，但网络规则无效。做这一步主要为了优化速度，不想优化速度的可以跳过这个配置。在对应平台的配置(manifest.json)下添加。大纲路线、讲解视频，并且后续会持续更新**
uni-app 分包
jifaliwo123的博客
09-14 3154
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。当用户进入分包的某个页面时，再去下载对应的整个分包，然后再显示该页面。【解决】如果使用了uni-app的导入uni_modules方式导入组件，那么就会有这个情况。大多情况下，我们需要对主包进行瘦身——分包，把不属于公共的组件，不是属于小程序主体页面的模块分出去。
uniapp上传微信小程序分包具体流程
06-06
Uniapp 中上传微信小程序的分包流程如下： 1. 首先在项目的 `manifest.json` 文件中设置分包的配置信息，包括分包的名称、路径以及使用到的页面等内容。 2. 然后在需要使用到分包的页面或组件中，通过 `...
UniApp最近辛苦了 连续作战本周的APP项目
10-11
总结来说，UniApp以其便捷的开发流程、强大的功能集和良好的社区支持，让我们在一周内完成了APP项目的开发。这不仅是对技术的考验，更是对团队协作和项目管理能力的提升。希望通过这次实战经验，能为其他使用UniApp...
uniapp和小程序如何分包，详细步骤手把手（图解）
热门推荐
陈新科的博客
09-01 3万+
一、小程序分包 每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示 目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的
UNI-APP 分包使用(详解与实战)
码海扬帆：前端探索之旅的博客
03-02 1951
4、在pages.json中创建"subPackages"数组，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成（参数同pages）；js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。
uni-app分包
atu1111的博客
07-23 7801
uni-app分包   问题引入：为什么uni-app分包？   原因：小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。而uni-app是做跨端开发看，所以也就引入了分包机制。App默认为整包。从uni-app 2.7.12+ 开始，也兼容了小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，详见：https://uniapp.dclou
小程序分包
LoveZJC96的博客
03-14 667
1.为什么要分包 每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示 目前小程序分包大小有以下限制： 单个分包/主包大小不能超过 2M 不能超过9个包 2.分包步骤 1.先开启分包，如下图： 2.1.1找到manifest.json 2.1.
基于uniapp的小程序 分包步骤
anjignren的博客
07-22 587
最近在用uniapp写小程序，加的页面和功能有点多，发现。。。上传失败，超过了2M，只能进行分包了。 1.uniapp 给出了**官方的分包的文档** 2.言归正传，开始进行分包。 2.1 建立和page文件加同级的分包文件夹 名称自己定 在分包的这个文件加下面把想分出的文件放在这里 2.2 在manifest.json文件中在微信小程序配置 optimization 2.3 在pages.json文件中，进行配置 建立和 pages同级的数组，然后配置subPackages 以及root是配置和你前面
uniapp分包
一只小松鼠_的博客
03-05 1272
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。出现这几个字的原因是由于用户刚进入的界面必定是主包，而在用户进入分包的时候，由于分包资源还未下载，所以微信官方便贴心的提示用户正在加载分包资源。9、要清楚的是分包是一种不得已而为之的手段，确保在分包前项目中静态资源已优化完毕，且没有大量注释或无用代码也是一种手段。2). 分包：除主包外的所有页面都应放置在分包内，为避免读者混淆，本文会将该分包定义为。
uniapp小程序的分包处理
weixin_45781661的博客
09-03 372
uniapp小程序的分包处理 首先在manifest.json中加入如下配置 "optimization" : { "subPackages" : true }, 然后把需要分出去的页面写在这个分包里面 "subPackages": [{ "root": "pagesA", "pages": [{ "path": "list/list", "style": { ...} }] }, {
uniapp分包配置
09-08
Uniapp的分包配置主要在pages.json文件中进行。可以通过在pages.json中的subPackages字段进行配置。例如，可以按照以下方式配置分包： { "subPackages": [ { "root": "pages/subPack", "pages": [ { "path": ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值