当我们程序太大的时候,打开小程序就会比较慢,此处就需要用到分包加载,按照模块划分不同的包,让用户在需要的时候才加载对用的模块,也就是用户在进入某些页面的时候才下载该页面的资源,提高小程序的打开速度,以及首次加载资源的速度。

通常情况下,我们建的文件都在根文件夹下的pages里面



根文件夹其实就是主包,主包的文件对应在app.json中pages内的路径,比如在pages内新建一个home文件夹,home文件夹内新建index.wxml文件。



小程序在打开的时候会加载主包内的内容,如果所有文件都写在主包,那么打开小程序的时候会加载大量资源,导致小程序打开缓慢。

解决方法:分包加载

比如在这里要新建一个积分专区,那么主包内只需要新建一个对应的文件夹,这个是tabbar文件,必备,进入积分专区后,在专区内跳转的页面指定到子包,对应的模块在子包内完成。

新建子包

在根文件夹下新建一个文件夹,文件夹可以根据模块来命名,新建文件夹后在app.json中配置。



subpackages就是子包,内部的{"root":'xxx'}就是子包的文件夹名

{
"root" : 'xxxx'
}

pages就是文件夹下的文件路径,跟正常新建的文件流程一样。

如果要新建多个分包则在subpackages内配置多个包即可。

"subpackages" : {
{
"root": "包1",
"name": "包1",
"pages": [
"路径"
]
},
{
"root" : '包2'
.....
}
}

微信小程序分包的更多相关文章

  1. mpvue微信小程序分包

    ## 微信小程序分包(mpvue) 使用mpvue分包示例:1.下载vue脚手架(先有node环境,v8.12.0) npm install -g vue-cli 2.先用vue初始化一个mpvue小 ...

  2. 微信小程序分包跳转主包页面

    由于公司项目比较多,我们事业部的微信小程序就在一个分包里.那分包页面要回到主包的首页,该怎么跳转呢,有以下两种方法 wx.switchTab(Object object) 跳转到 tabBar 页面, ...

  3. 微信小程序分包加载实战

    "离线包"机制 微信小程序采用的是类似离线包加载方案,以转转小程序为例,当用户第一次打开时会先下载好所有代码,然后再加载页面:当用户再次进入转转小程序时,会直接使用已下载的代码,省 ...

  4. 微信小程序 - 分包加载

    小程序开发大家都知道,对主包的大小进行了限制,从最初的1M变成了现再的2M,一般情况下是够用了:但是偶尔可能会出现超出2M的可能,我们可以对小程序进行分包加载. 1.小程序分包加载 a. 某些情况下, ...

  5. 微信小程序分包加载

    分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主 ...

  6. 微信小程序 - 分包加载(预下载)

    开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度.对于独立分包,也可以预下载主包. 配置方法 预下载分包行为在进入某个页面时触发,通过在 a ...

  7. 微信小程序 - 分包加载(独立分包)

    独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行.从独立分包中页面进入小程序时,不需要下载主包.当用户进入普通分包或主包内页面时,主包才会被下载 将某些具有一定功能独立性的页面配置到 ...

  8. 微信小程序---分包加载(subpackages)及报错

    某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 分包很简单,具体步骤如下: 在app.json中,创建subPackages,root表示分包A的 ...

  9. 微信小程序 - 分包加载(分包使用)

    使用分包(建议主包添加跳转路径,分包放内容) 在app.json配置"subpackages" 在pages同级目录新建文件夹以及文件 打包原则 声明 subpackages 后, ...

  10. 全栈项目|小书架|微信小程序-项目结构设计分包

    前面的文章 介绍了服务端的基础搭建以及用户模块的设计,接下来就是在服务端和客户端实现具体的业务了. 本篇文章先来介绍微信小程序开发的项目结构设计,也就是项目分包情况. 由于项目是在<极客时间-9 ...

随机推荐

  1. 视觉享受,兼顾人文观感和几何特征的字体「GitHub 热点速览 v.22.46」

    GitHub 上开源的字体不在少数,但是支持汉字以及其他非英文语言的字体少之又少,记得上一个字体还是 霞鹜文楷,本周 B 站知名设计 UP 主开源了的得意黑体在人文观感和几何特征之间找到了美的平衡. ...

  2. ES文件传输助手1.0.0

    软件下载地址 1.软件功能 与 ES文件浏览器 的快传功能 直接传输文件 支持接受文件点击预览 可以多台电脑使用该软件,从而实现电脑与电脑局域网互传文件 单个文件夹上传会递归上传该文件夹下所有文件夹与 ...

  3. 解决Qt5 mouseMoveEvent事件不能直接触发

    问题描述 mouseMoveEvent 需要鼠标点击(左右中),然后在按下的同时移动鼠标才会触发 mouseMoveEvent事件函数. 解决 setMouseTracking(true);

  4. ValueError: Detected newline in header value. This is a potential security problem

    原因 flask框架进行重定向的url中包含 换行符\n或\r 解决方法 使用 strip() 函数去除行首或行尾的换行符(如果你url中间包含这些符号replace函数替换, 但是如果中间包含只能说 ...

  5. 【每日一题】【将cur的next尾插到pre后面,尾插k-1次】25. K 个一组翻转链表-211115&220120

    给你一个链表,每 k 个节点一组进行翻转,请你返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度. 如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保持原有顺序. 进阶: 你可以设 ...

  6. 【每日一题】【字符串与数字互转】【去除空格】【大数处理】2021年12月12日-8. 字符串转换整数 (atoi)

    请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C++ 中的 atoi 函数). 函数 myAtoi(string s) 的算法如下: ...

  7. 24V转5V降压芯片,24V转3.3V的稳压芯片,中文规格书

    一般说明PW2312 是一个高频,同步,整流,降压,开关模式转换器内部功率 MOSFET.它提供了一个非常紧凑的解决方案,以实现 1.5A 的峰值输出电流在广泛的输入电源范围内,具有优良的负载和线路调 ...

  8. 【云原生 • DevOps】一文掌握容器管理工具 Rancher

    一.容器管理工具 Rancher 介绍Rancher 是一个开源的企业级全栈化容器部署及管理平台,其实就是一个 Docker 的图形化管理界面.它为容器提供基础架构服务,可以让 CNI 兼容的网络服务 ...

  9. Velero 系列文章(二):使用 Helm 安装 Velero

    概述 本文是通过 Helm 3 来安装 Velero, 只做最基本的安装.并计划将 YAML (只备份 YAML, 不备份 Volume) 备份到腾讯云的 COS(兼容 S3, 所以可以通过 AWS ...

  10. Flutter和Rust如何优雅的交互

    前言 文章的图片链接都是在github上,可能需要...你懂得:本文含有大量关键步骤配置图片,强烈建议在合适环境下阅读 Flutter直接调用C层还是蛮有魅力,想想你练习C++,然后直接能用flutt ...