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

uni-app做微信小程序的分包处理 我们的都知道微信小程序有随即随用,用完即走的优点,并且它开发门槛低,但是它也有一个致命的缺点,就是代码包体积的限制,这一缺点让小程序的开发有了一定的限制,现在有一方法可以减少代码包的体积,能够让小程序的功能得到一定的扩展,这一方法就是——分包。 阅读详情

关于分包

规定小程序不能超过2M,一旦超过就需要分包

注意事项

subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
微信小程序每个分包的大小是2M,总体积一共不能超过16M。
百度小程序每个分包的大小是2M,总体积一共不能超过8M。
支付宝小程序每个分包的大小是2M,总体积一共不能超过4M。
QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
分包下支持独立的 static 目录,用来对静态资源进行分包。
uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化,即将静态资源或者js文件放入分包内不占用主包大小。详情请参考:关于分包优化的说明
针对vendor.js过大的情况可以使用运行时压缩代码
HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
cli创建的项目可以在pacakge.json中添加参数–minimize,示例:“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize”

使用方法

首先你得有个uniapp的微信小程序项目

这里假设你有了,原始项目结构
在这里插入图片描述
用微信开发工具打开的样子,没有分包之前
在这里插入图片描述

在pages同级创建分包

在这里插入图片描述
pages.json配置
在这里插入图片描述
然后呢,官网支持了 分包优化
在对应平台的配置下添加"optimization":{“subPackages”:true}开启分包优化
目前只支持mp-weixin、mp-qq、mp-baidu的分包优化
分包优化具体逻辑:
静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用
js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息
我的理解呢就是,既然你分包了功能模块,那相应的静态资源你得分吧,用图片的时候直接是分包下的路径,这才是个完整的分包.

这里我以微信小程序为例,
在这里插入图片描述
在这里插入图片描述

怎么跳转呢?

在需要点击跳转的地方就好啦

 uni.navigateTo({
   url: '/myPackageA/pages/piece/piece'
 })

然后重启微信开发工具运行
在这里插入图片描述
可以看到已经分包成功

UniApp集成微信小程序原生分包 Uniapp 集成微信原生代码文件 阅读详情

相关推荐

《uni-app 小程序包体积优化:删除无用代码、图片压缩、分包加载,轻松过 2M 限制》(附微信小程序分包配置步骤)

本文针对uni-app跨端开发中小程序体积超标问题,提出三大优化策略:1)代码精简,通过按需引入组件、替换重型依赖和清理无效代码;2)图片压缩,采用工具压缩、base64内嵌和CDN存储;3)智能分包,合理划分主包与分包功能模块。结合某旅游小程序从3.2M压缩至890KB的案例,详细介绍了分包配置、资源存储规则及预加载机制,为开发者提供了一套可落地的体积优化方案,有效解决2M主包限制难题。

qq_59041750的博客 1585

uniapp npm run dev:mp-weixin报错:cross-env NODE_ENV=development

报错如下 cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch 缺少平台 mp-weixin 插件 首先你需要装一下cross-env,执行: npm install --save-dev cross-env --no-bin-links 或者你也可以全局安装一下cross-env,以防止以后在其他项目也出现类似错误: npm install -g cross-en

Thekingyu的博客 3万+

Microchip Studio 7.0 从零开始:下载、安装到首个AVR工程实战

本文为AVR单片机开发新手提供了Microchip Studio 7.0的完整入门指南。从官方下载、避坑安装,到创建首个GCC C工程、编写LED闪烁代码,再到项目配置、仿真调试与程序烧录,手把手带你完成从零到一的实战过程,是掌握AVR开发环境的必备教程。

weixin_29200741的博客 522

Sass安装及基本语法

1、什么是Sass? Sass是一种css预处理器 Sass可是使用css没有实现的功能,例如变量、嵌套、组合、继承等等; Sass语法来编写.scss文件 ,将它们编译成.css文件 2、安装: 使用npm安装 npm -v (确保已安装上npm) npm install -g sass / (cnpm)淘宝镜像 3、编译.scss文件为css文件 运行:sass input.scss out...

lgrrrr的博客 389

MobaXterm结合SSH密钥对安全连接阿里云ECS的实战教程

本文详细介绍了如何使用MobaXterm结合SSH密钥对安全连接阿里云ECS的实战教程。通过对比传统密码登录的风险,重点讲解了密钥对的生成与配置、阿里云控制台的密钥绑定技巧,以及MobaXterm的高级设置和故障排查方法,帮助用户实现高效、安全的远程连接。

weixin_29208327的博客 466

探索如何利用CST和ADS进行DDR的SIPI联合仿真

本文系统介绍了CST和ADS两款工具进行DDR信号完整性/电源完整性(SI/PI)联合仿真的方法。CST采用工作室协同方式,通过PCB布局导入、材料设置、模型分配等步骤,重点分析了电源阻抗优化和信号波形质量。ADS则利用SIPro、PIPro等专用工具,突出系统级验证和自动化优化功能。两者各有优势:CST擅长3D结构精确建模,ADS更适于快速系统验证。文章建议可根据项目需求混合使用两种工具,并提供了模型简化、频带选择等实用技巧。通过对比分析,为工程师选择仿真工具提供了决策参考。

一只豌豆象的博客 1150

c# 支付宝小程序开发入门知识(一)

1、支付宝小程序去掉单页的头部导航: 需要在app.json中添加以下属性控制 "window": { "defaultTitle": "我的标题", "transparentTitle": "always", "titlePenetrate":"YES" }

书写人生 999

MongoDB分布式事务实现:两阶段提交、日志复制与冲突解决

MongoDB分布式事务机制解析 本文深入剖析了MongoDB 4.0+版本的分布式事务实现原理,重点分析了其在跨文档/跨集合/跨分片场景下的数据一致性解决方案。核心内容包括: 底层机制:采用改进的两阶段提交协议,通过oplog日志复制实现无中心协调器的事务管理,结合WiredTiger存储引擎和锁机制保障ACID特性。 创新设计:将传统2PC的中心协调功能分散到Primary节点,利用oplog作为事务状态记录,实现自动故障恢复和60秒超时回滚机制。 性能优化:针对大事务、写冲突等常见问题,提出拆分微事务

数据知道的博客 1261

使用sass编译报错:dev:mp-weixin: `cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni

挺久没有创建项目了,今天创建项目引入sass编译的时候居然报错了 dev:mp-weixin: `cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni 导致这个问题的原因可能是:node-sass和sass-loader的版本不相符合 重新下包就可以了,如下版本绝对是没有问题的 npm i node-sass@4.14.1 sass-loader@7.3.1 下包成功,重新编译奇迹再现 最后,希望这边文章能

weixin_48321061的博客 8489

药物对接仿真软件:HADDOCK_(9).结果分析方法

HADDOCK是一种强大的药物对接仿真工具,通过对生成的输出文件进行详细的分析,我们可以验证仿真结果的可靠性,并为进一步优化药物设计提供依据。常见的分析方法包括解读输出文件、使用可视化工具进行结构分析、评估对接模型的稳定性和准确性等。通过这些步骤,我们可以更全面地了解受体和配体的结合模式,从而提高药物设计的成功率。

kkchenjj的博客 1007

acados安装与调试指南:版本兼容性问题

在计算机编程领域,软件工具和库的安装与调试是每个开发者必经的挑战。最近,在安装和使用acados库时,我遇到了一个有趣的问题,这里我将详细分享我的经验和解决方案。

m0_62153576的博客 740

各家小程序总包及其分包大小限制

小程分包大小,总包大小

weixin_48755718的博客 2914

GEE案例教程:融合Sentinel-1 SAR数据、Sentinel-2光学影像和WorldPop人口数据,构建完整的洪水监测与影响评估工作流

本文介绍了一个专为巴基斯坦哈扎拉分区设计的洪水监测系统,该系统整合了Sentinel-1 SAR数据、Sentinel-2光学影像和WorldPop人口数据等多源遥感数据。系统通过VV极化SAR数据的水体提取算法(阈值-13dB)实现洪水范围监测,结合10米分辨率的光学影像进行可视化验证,并利用100米分辨率人口数据评估受灾人口。系统提供完整的技术实现,包括研究区加载、遥感数据处理、日期选择界面和洪水变化检测等功能模块,为灾害应急响应提供科学依据。

此星光明博客 191

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

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

weixin_39846898的博客 753

从零开始学习CANoe(六)—— CAPL 测试节点

创建CAPL Test Module的两种方式

蚂蚁小兵 1万+

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

2024 最新基于Uni-app和Vue3实现微信小程序分包,并且主包调用分包页面作为组件加载,包括优化预加载-详细教程和使用

然后在创建子级目录目录结构如图所示第一步:配置manifest.json文件。

3861

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

uni-app 微信小程序分包加载:配置

需要用到的场景: 项目打包后代码大小超过2M。 官方文档: uni-app subPackages 配置 1. manifest.json 在app端添加分包设置。 “app-plus”:{ "optimization":{"subPackages":true}, "runmode" : "liberate" } 2. 运行压缩 Hbuilder X 编辑器菜单栏 运行——> 运行到小程序模拟器——> 点击 “运行时是否压缩代码” 3.添加子包文件夹、并且在pages.json中添加子

小五 1061

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

微信小程序开发学习笔记《19》uni-app框架-配置小程序分包与轮播图跳转

博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读。

tutgxu的博客 718

uni-app微信小程序分包

uni-app微信小程序分包

lsklike的博客 1377

uni-app微信小程序分包处理

场景 由于微信小程序规定不能超过2M,在做了精简优化代码之后还是太大了,无法上传代码怎么办?使用官方支持的分包来解决。 官方文档:https://uniapp.dcloud.io/collocation/pages?id=subpackages subPackages里的pages的路径是root下的相对路径,不是全路径。 微信小程序每个分包的大小是2M,总体积一共不能超过16M。 百度小程序每个分包的大小是2M,总体积一共不能超过8M。 支付宝小程序每个分包的大小是2M,总体积一共不能...

weixin_42543235的博客 3166

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

小程序分包开发指南摘要 小程序分包开发可以有效优化性能和管理复杂度。主要优势包括:减小主包体积加快启动速度、按需加载节省流量、模块化提高可维护性,并支持更大规模应用。分包限制为总大小不超过20MB,单个包不超过2MB。 开发流程需注意:tabBar页面必须在主包;pages.json需配置subpackages字段定义分包路径;分包间不能嵌套或相互引用资源。具体实现步骤包括创建分包文件夹、配置manifest.json启用分包、在pages.json中定义分包结构,并通过指定路径跳转分包页面和使用资源。 扩

2301_76459194的博客 2235

hbuilderx 小程序分包_uniapp编译小程序分包配置

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

weixin_39879651的博客 1132

用uni-app开发微信小程序:设置分包和预下载

用uni-app开发微信小程序:设置分包和预下载

听海边涛声 715

uni-app 微信小程序分包

1.pages.json 文件中设置分包,配置项:"subPackages",注意tabbar页面,只能放在主包。"optimization":{"subPages":true},启用分包。3.manifest.json文件中。2.pages.json文件中。

Gewenjuan_0309的博客 525
上一篇: 解决elementUI中导航菜单(el-menu)页面刷新后的菜单选中问题
下一篇: 下载vue-devtools插件商店,下载axure
春风姐姐
博客等级 码龄8年 127粉丝 69原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值