微信小程序/uniapp 程序分包处理,小程序性能优化

embedded/2024/12/22 9:49:28/

目录

  • 分包的作用
  • 文件分包
  • 分包配置
  • 注意事项

分包的作用

微信小程序性能与体验优化官网解释
使用 分包加载 是优化小程序启动耗时效果最明显的手段。建议开发者按照功能划分,将小程序的页面按使用频率和场景拆分成不同分包,实现代码包的按需加载。

分包加载具有以下优势:

承载更多功能小程序单个代码包的体积上限为 2M,使用分包可以提升小程序代码包总体积上限,承载更多的功能与服务。
降低代码包下载耗时:使用分包后可以显著减少启动时需要下载的代码包大小,在不影响功能正常使用的前提下,有效降低启动耗时。
降低小程序代码注入耗时:若未开启按需注入,小程序编译时会将所有 js 文件打包成同一个文件一次性的注入,并执行所有页面和自定义组件的代码。分包后可以降低注入和实际执行的代码量,从而降低注入耗时。
降低页面渲染耗时:使用分包可以避免不必要的组件和页面初始化。
降低内存占用:分包能够实现页面、组件和逻辑较粗粒度的按需加载,从而降低内存的占用。

文件分包

微信开发者工具官网分包加载
将要分包出来的文件新建文件夹,独立出来,目录结构如下:

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

分包配置

首先在manifest.json文件中的源码视图中添加:

"mp-weixin" : {"optimization" : {"subPackages" : true // 设置为true},},

然后在pages.json文件中,将主包和分包分别配置:

{"pages":["pages/index","pages/logs"],"subPackages": [{"root": "packageA","pages": ["pages/cat","pages/dog"],"entry": "index.js"}, {"root": "packageB","name": "pack2","pages": ["pages/apple","pages/banana"]}]
}

subPackages 中,每个分包的配置有以下几项:

字段类型说明
rootString分包根目录
nameString分包别名,分包预下载时可以使用
pagesStringArray分包页面路径,相对于分包根目录
independentBoolean分包是否是独立分包
entryString分包入口文件

注意事项

打包原则

  • 声明 subPackages 后,将按 subPackages 配置路径进行打包,subPackages 配置路径外的目录将被打包到主包中
  • 主包也可以有自己的 pages,即最外层的 pages 字段。
  • subPackages 的根目录不能是另外一个 subPackages 内的子目录 tabBar 页面必须在主包内

引用原则

  • packageA 无法 require packageB JS 文件,但可以 require 主包、packageA 内的 JS
    文件;使用 分包异步化 时不受此条限制
  • packageA 无法 import packageB 的 template,但可以 require 主包、packageA 内的
    template
  • packageA 无法使用 packageB 的资源,但可以使用主包、packageA 内的资源

低版本兼容
由微信后台编译来处理旧版本客户端的兼容,后台会编译两份代码包,一份是分包后代码,另外一份是整包的兼容代码。 新客户端用分包,老客户端还是用的整包,完整包会把各个 subPackages 里面的路径放到 pages 中。

分包入口文件
每个分包的配置中,entry 字段可以指定该分包中的任意一个 JS 文件作为入口文件,该文件会在分包注入时首先被执行。

指定的 JS 文件应该填写相对于分包根目录的路径,例如需要指定 /path/to/subPackage/src/index.js 作为分包 /path/to/subPackage 的入口文件时,应填写 src/index.js。

调试这个功能需要 1.06.2406242 或以上版本的微信开发者工具,正式环境没有版本需求。


http://www.ppmy.cn/embedded/114634.html

相关文章

【Linux】基础IO认识(2)

基础IO认识(2) 1、补充系统调用1、1、read调用1、2、stat 2、重定向2、1、文件描述符的分配规则2、2、实现重定向(dup2) 3、缓冲区的理解3、1、缓冲区典型实例3、2、缓冲区代码形式展示 4、深化和实践利用4、1、在shell中加入重定向4、2、简单实现库的封…

计算机图形学 中心画圆算法 原理及matlab代码实现

中心画圆算法原理 总体思路: 将圆划分为八部分,先通过diF(xi1,yi-0.5)和隐函数Fx2y2-R2绘制八分之一的圆,然后通过圆的对称性确定另外七个部分的相应坐标绘制完整的圆。 求中点误差项递推公式: 从(x0,y0r)开始,因绘…

istio中serviceentry结合egressgateway的使用

假设有一个外部服务,外部服务ip为:10.10.102.90,其中32033为v1版本,32034为v2版本。 现在需要把这个服务引入到istio中,并且需要配置所有访问该服务的流量都通过egressgateway转发出去。 serviceentry apiVersion: n…

房产销售系统:SpringBoot技术优势分析

第三章 系统分析 3.1 系统设计目标 房产销售系统主要是为了用户方便对房源信息管理、房源类型管理、房子户型管理、交易订单管理、预约看房管理、评价管理等信息进行查询,也是为了更好的让管理员进行更好存储所有数据信息及快速方便的检索功能,对系统的各…

【JAVA开源】基于Vue和SpringBoot的在线文档管理系统

本文项目编号 T 038 ,文末自助获取源码 \color{red}{T038,文末自助获取源码} T038,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

javascript中Number 类型 在实际开发中常用的一些操作方法

在 JavaScript 中,Number 类型是非常基础的数据类型之一,用于表示整数和浮点数。除了基本的算术运算外,还有许多内置的方法可以帮助你处理数字。下面列举了一些在实际开发中常用的 Number 类型的操作方法: 1. 转换方法 Number()…

【开源免费】基于SpringBoot+Vue.JS高校心理教育辅导系统(JAVA毕业设计)

本文项目编号 T 031 ,文末自助获取源码 \color{red}{T031,文末自助获取源码} T031,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计 六、核…

uniapp与webview进行数据通信

uniapp与webview进行数据通信&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno"…