uniapp小程序分包
时间: 2023-08-31 08:10:06 浏览: 168
Uniapp小程序的分包可以通过在manifest.json中配置subPackages实现。subPackages是一个数组,每个子包需要提供name和root两个属性,其中name是子包的名字,root是子包的根目录路径。例如:
```
"subPackages": [
{
"name": "subpackage1",
"root": "subpackages/subpackage1"
},
{
"name": "subpackage2",
"root": "subpackages/subpackage2"
}
]
```
在小程序运行时,子包的代码将会被分割成多个包,按需加载。需要注意的是,如果使用了分包,主包中的页面仍然需要在app.json中定义,否则无法访问。同时,分包的功能需要在uni-app 2.3.2及以上版本才支持。
相关问题
uniapp 小程序分包
uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化。分包优化的目的是将静态资源或js文件放入分包内,以减少主包的大小。在构建小程序分包项目时,会输出一个或多个分包。每个有分包的小程序必定包含一个主包,在主包下放置默认启动页面、tabBar页面和一些所有分包都需要使用的公共资源。分包的划分根据开发者的配置进行。需要注意的是,微信小程序规定整个小程序所有分包大小不超过20M,单个分包/主包大小不能超过2M。
uniapp小程序分包异步
### UniApp 小程序分包异步加载实现方法
#### 一、基础概念介绍
微信小程序在版本2.11.2之后已经支持分包异步化,这一功能允许开发者通过两个主要特性来优化主包体积:跨分包自定义组件引用以及跨分包JS代码引用[^1]。
#### 二、具体实施步骤说明
为了使分包能够被异步加载,在项目配置文件`manifest.json`中的`mp-weixin`节点下设置`subpackages`字段。对于每一个子包而言,可以指定其入口路径(`root`)及其名称(`name`)。如果希望进入特定页面时提前下载对应的分包资源,则可以在对应页面的json配置里加入`usingComponents`声明,并利用`preloadRule`属性来进行更细致化的控制[^3]。
当涉及到不同分包间的交互特别是调用位于其他分包包内的自定义组件时,需注意以下几点:
- 使用占位符组件的方式完成跨分包自定义组件的引用;
- 对于带有`ref`特性的异步组件实例化方式如下所示:
```html
<template>
<!-- ... -->
<guideModal ref="guideModalRef" @componentLoaded="componentLoaded('guideModalRef')"></guideModal>
<!-- ... -->
</template>
<script setup lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
componentLoaded(refName:string){
console.log(`${refName} has been loaded`);
}
}
})
</script>
```
此段代码展示了如何在一个Vue单文件组件内注册并初始化一个名为`guideModal`的异步组件,同时监听它的加载事件以便执行必要的回调逻辑[^2]。
另外值得注意的是,整个应用程序(包括但不限于所有分包)的最大尺寸限制为16MB;而单独的小程序主体部分连同首次启动所需的数据不得超过2MB。
阅读全文
相关推荐














