uniapp转小程序分包

最新推荐文章于 2024-08-28 11:22:50 发布

置顶一枚小米渣

最新推荐文章于 2024-08-28 11:22:50 发布

阅读量2.5k

点赞数

文章标签： css3 html5 javascript 前端 vue

本文链接：https://blog.csdn.net/weixin_45435854/article/details/106812874

版权

uniapp

uniapp转小程序分包

由于小程序上传发布有限制要求，目前小程序分包大小的限制
整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M

建立分包文件夹

所以需要分包，如果项目是用的uniapp框架编译的小程序。可做以下配置。建立一个与pages同级的文件夹。如packone,这个文件夹就是分包的页面路径，以及这些页面所用到的组件资源都可以放在packone这个文件中。(建议静态资源放在网络上,减少包的内存占有)
在这里插入图片描述

配置subPackages

root为打包的根路径。其下pages为分包的页面配置(注意分包配置的path,在其他包中不能重复设置)

在这里插入图片描述

对于主包的配置，对h5,app,小程序有不同需求的可以在style中分别设置：

在这里插入图片描述

运行压缩代码

在这里插入图片描述

打开开发者工具查看基本信息即可

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一枚小米渣

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

详细讲解uniapp转小程序分包教程！！！

2401_84436058的博客

05-04

811

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-VcMkMh4K-1714762046730)][外链图片转存中…(img-Cm4Ew2X5-1714762046731)]

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

故里2130

03-30

359

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

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

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

2401_83621095的博客

03-19

2796

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

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

2401_84296945的博客

04-28

4917

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

一文教你Uniapp和小程序如何优雅分包

weixin_45734165的博客

08-20

428

js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。分包里的components是单个分包自己的组件目录，分包vue页面的引用只能是在自己page_xxxx分包目录下才可以引用。配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

跨平台应用开发进阶(六十二)：如何把 uni-app APP项目转换成小程序

IT全栈华强工作室

05-12

3232

随着移动互联网的快速发展，移动应用已成为生活中不可或缺的一部分。与此同时，跨平台开发也得到越来越多的关注，因为它可以提高应用程序的效率并降低开发成本。Uniapp是一种跨平台开发框架，基于Vue.js，并且可以在多个平台如微信小程序、支付宝小程序、H5等上运行。对于开发人员来说，这意味着他们可以使用同一个代码库来构建多个平台的应用，而不需要开发不同的代码库。本文接下来将介绍如何把Uniapp转换成小程序，并提供一些有用的技巧和经验。

uniapp中使用分包

yuansusu_的博客

04-25

3932

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

Uniapp微信小程序分包

yanling_061的博客

08-17

468

2. 配置pages.json，新增"subPackages": []数组，分别配置root属性和pages属性，root是分包的名称，pages接收分包下的页面配置，配置写法等同于上级的pages。## 额外的还可以配置在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。- 主包，用来放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本。- 分包，其他除了启动页面/TabBar页面外的页面，和每个分包页面下所需要使用的组件。......

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

2401_84433570的博客

04-29

344

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

uniapp微信小程序项目的分包实现

然后不二

12-02

1246

uniapp、微信小程序、分包、静态资源

uniapp分包demo

11-03

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

uniapp微信小程序分包

ITshayebuhui的博客

07-02

1530

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

小程序分包

LoveZJC96的博客

03-14

667

1.为什么要分包每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示目前小程序分包大小有以下限制：单个分包/主包大小不能超过 2M 不能超过9个包 2.分包步骤 1.先开启分包，如下图： 2.1.1找到manifest.json 2.1.

uniapp分包

热门推荐

陈新科的博客

09-01

3万+

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

uni-app 分包

一个不掉头发的资深小白

08-28

376

优化项目首次启动的下载时间；小程序默认就是整包(主包)下载，但这会导致整个项目只有在全部加载完毕后才会回显到用户眼前，这样虽然可以使用加载动画进行优化，但也会有部分可能导致用户流失。

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

uniapp----分包

一个努力不被优化的程序员

08-11

5677

分包开发一、什么是分包开发？有很多小伙伴一听分包开发认为就是多建几个文件夹，到时候引用就行了，说对对，但也不对，慢慢看下去就知道原因了：首先是官网的介绍：可能说的不是特别清晰，大概意思就是：创建文件，并在min.js中添加路径，并添加下载事件分包对于中、大型项目开发来说是非常有必要的，因为2MB根本做不了什么好看的项目，所以分包开发这个技术一定要会，可以不用但一定要知道怎么解决超出限制问题喜欢的小伙伴可以点个关注后续还会继续发布关于uniapp优化的文章。

uniapp支付宝小程序分包

02-28

在UniApp中，可以使用支付宝小程序分包功能来优化小程序的加载速度和性能。分包可以将小程序的代码和资源文件划分为多个包，按需加载，从而减少首次加载的时间和包大小。要使用支付宝小程序分包功能，需要进行以下...