uniapp写小程序如何实现分包

小前端

已于 2024-07-05 09:30:21 修改

阅读量1.1k

点赞数 4

文章标签： uni-app 小程序 apache

于 2024-03-27 09:08:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45041493/article/details/137064820

版权

众所众知小程序上传的过程中对包的大小有限制，正常情况下不允许当前的包超过2M，所以需要分包
需要再pages.json这个文件夹中进行配置在这里插入图片描述

"pages": [
		{
   
			"path": "pages/index/index",
			"style": {
   
				"navigationBarTitleText": "首页"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小前端

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

关于uniapp小程序的分包问题

coding...

02-28

3450

由于使用插件默认会导入到uni_modules文件夹下，根目录下的uni_modules和components下的文件打包时会全部默认打包到主包中，那么这些插件和公共组件也需要分包处理，分包需要的插件可以放置到分包的目录下，分包下创建components文件，放入分包页面所用到的公共组件。对于uni_modules中的插件，如果是页面单独使用，那么可以放在对应分包里的页面文件下单独引入即可。如果分包公共使用的放在分包下的components文件夹下引入使用即可。分包也可以分多个，按照实际情况分包即可。

前端学习（2347）：创建新页面和配置

歌谣的博客

10-04

898

pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/message/message", "style" : { "navigationBarTitleText": "信息页", "navigationBarBackgroundColor": "#7FFF00", "h5":{ ..

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

uniapp中使用分包

yuansusu_的博客

04-25

4668

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

uniapp 小程序分包处理(来源字节旗下ai)

最新发布

qq_48315915的博客

04-22

880

分包是将小程序项目按照功能模块划分，拆分成不同的子包，在小程序启动时只下载主包，当用户进入分包页面时才按需下载对应的分包，从而减少小程序的启动时间。合理的分包策略可以显著提升小程序性能和用户体验。合理规划分包结构持续优化包体积注意资源合理分配做好性能监控根据实际情况调整分包策略。

uni-app 小程序 配置分包

weixin_63456913的博客

11-04

1067

什么是配置分包。

uni-app 中两个系统各自显示不同的tabBar

Welcome to My blog

03-20

2261

最近在一个项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的页面,但是在项目中中的的数组只有一个，且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义。目录1、我们确定在 pages.json文件中的pages数组中的第一个页面就是进入程序时展示的第一个页面,那这个页面肯定就是我们的登录页面了。2、将pages.json中的tabBar的list设置为空数组,即不再使用默认系统自带的tabBar组件。3、创建tabBar.vue组件,组件内的代码内容如下。4、在main.

uniapp微信小程序分包

ITshayebuhui的博客

07-02

1868

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

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

故里2130

03-30

805

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

uniapp 微信小程序异步调用分包的自定义组件

liuye066的专栏

05-10

1407

在微信开发者工具的模拟器上测试，能调用成功，显示正常，但真机调试时，组件不显示，控制台报错Component is not found in path "subTaixin/measureHeart/moreFun" (using by "pages/index/index")；需求：在分包subTainxin中创建自定义组件moreFun.vue，需要在主包的pages/index/index页面调用该自定义组件。2.1 在pages/index/index.vue中。上传到体验版上，扫码测试时又正常。

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

然后不二

12-02

1417

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

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

2401_84296945的博客

04-28

6394

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

uniapp分包demo

11-03

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

uniapp 小程序如何从主包页面跳转到分包页面

tdjqqq的博客

07-20

5286

在uniapp开发小程序的时候，“分包”概念一定要提前了解下，具体我就不多说了，自己看下关网的相关配置。那么，如果从主包页面，跳转至分包的页面呢？在我的页面创建好自己的链接，我使用的是方法创建的。/分包名/页面路径?参数1=值&&参数2=值。一定要注意跳转的路径，要加上【分包名】接受不久，大神路过！

uniapp分包使用uview组件

qq_62787048的博客

06-29

2152

在uni-app中，如果你想在分包中使用uView UI组件库，可以按照以下步骤进行操作。通过以上步骤，你就可以在uni-app的分包中使用uView UI组件了。

uni-app小程序分包详细步骤~（保姆级）

m0_62626838的博客

07-21

1305

1、首先需要明白小程序的主包是pages文件夹，当我们需要分包时，将主包的pages文件夹中的页面文件按需剪切至一个新的文件夹中（例如我们在根目录下新建一个pageA文件夹，里面新建一个pages文件夹，此时将页面文件剪切至此）于是小程序提供了分包的解决方法，将一个完整的的小程序，在打包时分成不同功能或需求的分包，在用户使用时再加载对应的分包。2、按需将static的静态文件也赋值到pageA中（静态文件按需保留，该分包中未使用到的静态文件删除掉即可）4、修改uniapp关于改分包页面文件的路由跳转路径。

uniapp写小程序 小程序分包处理

wen_rou11的博客

08-05

2463

uniapp 小程序分包处理

【微信小程序】进阶篇 -- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）

JMFive的博客

03-27

5022

大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第51篇文章;今天开始学习微信小程序的第35天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。

记录uniapp 分包步骤

a393007511的博客

11-26

4125

普通页面分包（按tabbar进行分包）注意事项: tabbar 应用的页面需要在主包如果有登录注册页面要做主包被多个tabbar引用的组件或是页面要写到主包待续静态文件分包在分包路径下新建static文件夹将需要引用的文件放入在页面引用/分包名/static/文件名 mainfest.json 中的配置 "mp-weixin" : { "appid" : "", "setting" : { "urlCheck" : false,

uniapp 小程序分包操作

耳朵

03-01

1483

uniapp 小程序 目的：用uniapp 可以实现一套代码适配多端在做公司项目时需要用uniapp来开发小程序 也是第一次接触到看了官方文档和许多大佬的总结这里总结一下关于分包（为什么）好像是规定小程序不能超过2M,一旦超过就需要分包官方文档官方介绍具体操作 1. 在自己的uniapp项目中找到pages 未分包之前 2.自己的项目pages中会有很多个文件夹 3.在pages的同级创建分包pagesA pagesB(名字可任意) 分包之后 4.之后则需要在pages.j

uniapp微信小程序如何分包

04-13

<think>好的，用户想知道在UniApp中如何为微信小程序实现分包功能。首先，我需要回忆一下相关的知识，尤其是参考提供的引用内容。根据引用[1]、[2]、[3]，UniApp的分包主要通过在pages.json中配置subPackages字段，同时注意目录结构和一些限制，比如Tab页不能放在分包里。用户可能已经遇到主包超过3M的问题，所以需要分包来优化。首先，我应该分步骤说明如何创建分包目录，配置pages.json。然后，强调注意事项，比如Tab页的处理和引用限制。可能还需要提到优化方法，比如勾选压缩代码选项，如引用[1]提到的。另外，用户可能需要知道如何配置preloadRule来预加载分包，提升用户体验。同时，需要指出uni_modules的处理方式，如果插件只在子包使用，可以放到子包里，避免主包过大。需要确保回答结构清晰，步骤明确，并且引用对应的引用来源。可能用户还会关心实际操作的例子，比如代码配置示例，这样更容易理解。最后，生成相关问题，帮助用户进一步了解分包的性能优化、预加载规则和常见问题处理。确保问题覆盖用户可能遇到的后续疑问。</think>### UniApp微信小程序分包功能实现教程在UniApp中实现微信小程序分包功能需遵循以下步骤，可有效解决主包体积超过3M的限制问题： --- #### **一、目录结构规范** 1. 创建与主包`pages`目录同级的子包目录，例如`pages_user`或`pages_my` ``` ├── app.js ├── pages │ ├── index │ └── logs └── pages_user // 分包目录 └── index └── index.vue ``` 引用官方推荐结构[^2] --- #### **二、配置分包信息** 在`pages.json`中添加`subPackages`字段： ```json { "pages": [ // 主包页面配置 {"path": "pages/index/index", "style": {...}} ], "subPackages": [ { "root": "pages_user", // 分包根目录 "pages": [ { "path": "index/index", // 分包内页面路径 "style": { "navigationBarTitleText": "用户中心" } } ] } ] } ``` 引用具体配置示例[^3] --- #### **三、预加载规则（可选）** 通过`preloadRule`设置分包预加载： ```json "preloadRule": { "pages/index/index": { // 触发预加载的页面路径 "network": "all", // 网络环境 "packages": ["pages_user"] // 需要预加载的分包名 } } ``` --- #### **四、关键注意事项** 1. **Tab页限制** TabBar页面必须放在主包内，否则无法正常显示[^1] 2. **资源引用规则** - 子包内组件/页面仅限本包内调用 - 公共组件建议放在主包或通过`easycom`自动引入 3. **uni_modules处理** 仅在子包使用的插件可移至子包目录，引用时使用相对路径： ```js import uCharts from '../uni_modules/...'; ``` 引用特殊处理方式[^1] --- #### **五、优化建议** 1. 在HBuilderX中勾选「运行时压缩代码」 2. 使用分包预下载提升用户体验 3. 定期使用微信开发者工具分析包体积 ---