解析 uni-app 小程序分包策略：合理优化包体积分布

news2024/9/25 21:22:33

image.png

引言

微信小程序的流行使得越来越多的开发者投入到小程序的开发中。但是，随着项目规模的增大，小程序的性能也会面临一些挑战。其中，小程序分包策略是提升性能的重要一环。

同时，uni-app 的流行也使众多的移动端开发者选择使用 uni-app 框架来开发移动端应用，因为开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台，极大的提高了应用生产效率。

纵然 uni-app 支持众多的小程序平台，由于在开发中，我们主要的还是开发的微信小程序，所以本文将会以微信小程序分包为例，介绍微信小程序分包策略的原理和实现，以及如何根据项目特点和需求，制定合理的分包策略，从而优化性能，提升用户体验。而其他多家的小程序将不进行过多的说明。

一. 为什么要分包

微信小程序之所以需要分包，主要是为了解决小程序官方限制了主包体积和总体积的大小，如果应用体积超限，我们将不能发布到应用官方，最终会上不了线。

其次，不仅是由于官方有这个限制，本着用户体验的角度来思考问题，我们也必须要有做分包优化的操作，因为合理的分包可以有以下几个好处：

  1. 提高首页加载速度：随着小程序项目规模的增大，首页所需的代码和资源也会越来越多，导致首页加载时间变长，影响用户体验。通过分包，可以将部分代码和资源拆分到其他子包中，在首页加载时只需加载必需的核心代码，从而减少首页的加载时间。

  2. 优化性能：小程序的性能对用户体验至关重要。通过分包，可以将一些与首页无关的功能模块或页面、大型资源文件等拆分到子包中，子包的使用也可以帮助有效减少小程序包的体积，提升小程序的加载速度。

  3. 分包预下载：分包可以提前加载用户即将使用的功能模块，从而加快跳转到对应页面的速度。通过合理的分包策略和预下载机制，可以在用户交互前就将页面所需的代码和资源提前加载好，确保用户流畅的使用体验。

其实说到底，微信小程序的分包功能主要是为了能够更好地管理代码和资源，减少主包的体积，能够正常上线，同时优化小程序的性能和用户体验。合理使用分包可以减少首页的加载时间，升整体性能，控制包体大小，并通过预下载机制加快页面的跳转速度，提供快速的体验效果。

二. 制定合理的分包策略

小程序包拆分为主包和子包，其中主包包含了小程序的首页和一些常用基础功能模块，而子包则包含了其他功能模块和页面。主包在用户第一次打开小程序时会被下载和加载，而子包则根据需要来动态下载和加载。

制定合理的小程序分包策略可以提升小程序的性能和用户体验。以下是一些制定分包策略的建议：

  1. 根据功能模块拆分

将小程序的功能模块拆分成不同的子包。比如：tabbar 模块、用户模块、推送模块等等。

  1. 根据资源引用拆分

自定义组件、JS 文件、静态资源仅被一个分包使用时则把它划为同一个分包中，如果是公共的资源被各个分包使用，则将其划为主包子云啊

  1. 分包预下载配置

通过分包预下载机制，在用户需要时能够快速加载，配置 preloadRule 后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度，减少用户等待时间，提升用户体验。

三. 具体操作

1. 确定分包结构

确定分包结构是重中之重，这就和建筑房屋一样，只要框架搭好了，其他的就都好办了。这里的分包结构就相当于框架，理清楚这里的结构，后面的就会特别简单。

以下是在实际项目中分包目录，主要进行了以下的拆解：

image.png

image.png

分包原则说明

每个子包下的目录包含按照下面的原则来划分：

  • 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用

  • js 文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）

  • 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

我们抽出几个重点的目录来进行说明

  • 主包：首页、tabbar 页面

    • 首页、tabbar 标签栏页面必须存在于主包下

  • 子包：（用户模块）

    • 所有的都是与用户相关的功能

    • 下属目录结构分为：pages、static、components

┌─components        // 主包组件
├─pages             // 主包页面
│  ├─tabbar         // tabBar 模块
│  ├─ ├─index
│  ├─ ├─message
│  ├─ └─center
├─pagesUser         // 分包：用户模块
│  ├─components     // 分包：组件
│  ├─static         // 分包：静态资源
│  └─pages          // 分包：页面
├─pagesApLink
│  ├─static
│  └─pages
├─pagesCenter
│  ├─static
│  └─pages
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

2. 配置 pages.json

我们在完成好了分包目录的创建以后，接下来就可以着手进行 pages 页面路由配置了，正确配置才会使最终的分包生效。

在根目录下的 pages.json 文件中，使用subPackages字段来配置分包的信息。在subPackages中可以定义每个子包的路径、名称和需要包含的页面。

{
  "pages": [
    {
      "path": "pages/tabbar/index"
    }
  ],
  "subPackages": [
    {
      "root": "pagesUser",
      "pages": [
        {
          "path": "pages/profile"
        }
      ]
    },
    {
      "root": "pagesApLink",
      "pages": [
        {
          "path": "pages/link"
        }
      ]
    },
    {
      "root": "pagesCenter",
      "pages": [
        {
          "path": "pages/center"
        }
      ]
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/tabbar/index"
      },
      {
        "pagePath": "pages/tabbar/message"
      },
      {
        "pagePath": "pages/tabbar/center"
      }
    ]
  }
}

3. 分包预载配置

假如子包的体积也过大，那么初次从主包页面进入子包页面的时候就会特别慢（这里只是做一种假设），需要用户进行等待，那么我们想要减少用户的这种等待时间，那么分包预下载的功能就能解决这个问题。

因此，分包预下载是提前将子包的代码和资源下载到用户设备上，从而在用户需要时能够快速加载。通过预下载机制，提前加载即将跳转到的子包，减少用户等待时间，提升用户体验。

配置如下：

{
  "preloadRule": {
    "pagesMessage/pages/message": {
      "network": "all",
      "packages": ["__APP__"]
    },
    "pagesCenter/page/center": {
      "network": "all",
      "packages": ["pagesMessage"]
    }
  }
}

注意，有一个限制：同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。

例如：页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B 中最多只能预下载总大小 1.5M 的分包。

4. manifest 使配置生效

在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化，则分包策略生效

image.png

image.png

四. 实践经验分享

1. 打包限制

  • tabBar  页面必须在主包内。

  • 首页必须在主包内，就是 pages.json 里配置的第一个页面路由。

  • 预下载限制：同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。

2. 引用限制

  • 分包之间的资源不能互相引用私有资源，例如：packageA  无法 引入  packageB的相关文件。

  • 主包与分包之间的限制：即主包不能引用分包的私有资源，分包可以引用主包的公共资源。

3. 其他说明

  • subPackages  里的 pages 的路径是  root  下的相对路径，不是全路径。

  • 微信小程序每个分包的大小是 2M，总体积一共不能超过 20M。

  • 支付宝小程，百度小程序每个分包的大小是 2M，总体积一共不能超过 8M。

  • 针对vendor.js过大的情况可以使用运行时压缩代码

    • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码

    • cli创建的项目可以在package.json中添加参数--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

结语

通过合理的微信小程序分包策略，我们可以将小程序的代码和资源拆分成多个子包，从而分散首页的加载压力，提升小程序的性能。

在制定分包策略时，我们可以根据功能模块划分来确定分包的范围和关系。同时，分包后我们也需要关注一些性能优化的细节，如首次加载优化和分包预下载技巧。

最后，我们也可以借鉴一些实践经验和注意事项，来优化自己的小程序分包策略，并提升用户的使用体验。

参考资料

  1. uni-app 分包加载机制

  2. 微信小程序使用分包

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2089677.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AcWing895. 最长上升子序列

AcWing895. 最长上升子序列

这个代码不知道怎么说&#xff0c;反正就是对着代码手算一次就懂了&#xff0c;无需多言&#xff0c;就是俩for循环里面的第二层for的循环条件是j<i,j是从下标1往下标i-1遍历的&#xff0c;每次a【j】<a【i】就在答案数组f【i】上面做出更新。基本的输入样例已经可以覆盖…
阅读更多...
揭秘数字水印技术：使用PyQt5实现图像中的LSB隐写术

揭秘数字水印技术：使用PyQt5实现图像中的LSB隐写术

在当今的数字化世界中&#xff0c;保护信息的安全性和隐秘性变得尤为重要。无论是在保护版权的数字水印&#xff0c;还是在隐秘传输信息的过程中&#xff0c;数字隐写术&#xff08;Steganography&#xff09;都是一种不可或缺的技术。今天&#xff0c;我们将带领大家探索一种简…
阅读更多...
关于LLC知识14

关于LLC知识14

1、LLC必须工作在感性区 2、为了降低LLC进入容性区后MOS管的电流应力&#xff0c;必须要选择快管&#xff0c;对体二极管的反向恢复参数有要求&#xff1a;trr<200ns 3、对于上下管的死区时间不能太短&#xff0c;否则电容无法充放电完成&#xff0c;就无法实现ZVS导通 如…
阅读更多...
DNN学习平台（GoogleNet、SSD、FastRCNN、Yolov3）

DNN学习平台（GoogleNet、SSD、FastRCNN、Yolov3）

DNN学习平台&#xff08;GoogleNet、SSD、FastRCNN、Yolov3&#xff09; 前言相关介绍1&#xff0c;登录界面&#xff1a;2&#xff0c;主界面&#xff1a;3&#xff0c;部分功能演示如下&#xff08;1&#xff09;识别网络图片&#xff08;2&#xff09;GoogleNet分类&#xf…
阅读更多...
短视频去哪里找素材？16个有短视频素材APP网站分享给你

短视频去哪里找素材？16个有短视频素材APP网站分享给你

短视频创作爱好者们&#xff0c;你们好&#xff01;在这个充斥视觉内容的年代&#xff0c;制作一部引人注目的短视频无疑是一项挑战&#xff0c;但也是一种艺术。要想打造出色的视频内容&#xff0c;首先需要的是高质量的素材。今天&#xff0c;我将向大家推荐几个非常棒的短视…
阅读更多...
windows安装macos虚拟机

windows安装macos虚拟机

我用的是macOS Ventura 13.5(22G74) MH.iso 下载链接 https://macoshome.com/macos/20492.html#Down 一、下载unlocker 用于给VMware提供macos选项 下载链接 https://github.com/DrDonk/unlocker/releases/tag/v4.2.7下载好后解压&#xff0c;进入windows目录&#xff0c;双…
阅读更多...
鸿蒙（API 12 Beta3版）【通过字节数组生成码图】

鸿蒙（API 12 Beta3版）【通过字节数组生成码图】

基本概念 码图生成能力支持将字节数组转换为自定义格式的码图。 场景介绍 码图生成能力支持将字节数组转换为自定义格式的码图。 例如&#xff1a;调用码图生成能力, 将字节数组转换成交通一卡通二维码使用。 约束与限制 只支持QR Code生成&#xff0c;根据纠错水平不同对…
阅读更多...
mysql中的mysql 库不存在，进行恢复

mysql中的mysql 库不存在，进行恢复

mysql中的mysql 库不存在&#xff0c;进行恢复 解决方法&#xff1a; 关闭数据库 service mysqld stop 以跳过权限认证方式启动mysql mysqld_safe --defaults-file/etc/my.cnf --skip-grant-tables & 在输入&#xff1a;mysql -u root 在输入&#xff1a;use mysql 在输…
阅读更多...
【PyQt5 应用程序】一个数据可视化案例

【PyQt5 应用程序】一个数据可视化案例

为了提供一个数据可视化应用的示例将创建一个简单的应用程序，该程序展示了如何使用PyQt和Qt Charts模块来绘制一个柱状图和一个曲线图。 这个示例将展示销售数据的趋势。 请确保已经安装了PyQt5和PyQtChart。如果没有安装可以通过pip安装它们： pip install PyQt5 PyQtChart…
阅读更多...
Linux Debian12使用flameshot或gnome-screenshot和ImageMagick垂直合并多张图片后组成一张滚动长图

Linux Debian12使用flameshot或gnome-screenshot和ImageMagick垂直合并多张图片后组成一张滚动长图

在发布博客&#xff0c;有时需要滚动截长图&#xff0c;虽然在windows系统有滚动截长图的工具&#xff0c;例如&#xff1a;FastStone Capture等&#xff0c;但是Linux Debian系统&#xff0c;这种滚动截长图的工具没有找到合适的。经过自己筛选验证&#xff0c;发现Linux Debi…
阅读更多...
四、生成房间之间的连线

四、生成房间之间的连线

一、连线 使用LineRenderer组件&#xff0c;调整坐标轴&#xff0c;更改线的粗细 需要给这个组件创建一个材质&#xff0c;最后制作成预制体进行实例化&#xff1b; 二、声明线组件 创建哈希列表 哈希列表中没有重复的数值&#xff0c;而list中有重复的 在此项目中&#xff…
阅读更多...
【香橙派系列教程】(二十一) 基于OrangePi Zero2的系统移植— 交叉编译工具链配置

【香橙派系列教程】(二十一) 基于OrangePi Zero2的系统移植— 交叉编译工具链配置

【二十一】基于OrangePi Zero2的系统移植— 交叉编译工具链配置 文章目录 【二十一】基于OrangePi Zero2的系统移植— 交叉编译工具链配置1.关于编译2.本地编译3.交叉编译 1.关于编译 编译是指将源代码文件&#xff08;如C/C文件&#xff09;经过预处理、编译、汇编和链接等步…
阅读更多...
P1509 找啊找啊找GF

P1509 找啊找啊找GF

人才出题人&#xff0c;挺会整活的。。。 一眼二维费用背包。 题目要求不单单是求最小时间&#xff0c;还要保证MM数量最多。 需要开两个数组f,dp,分别代表给定人品&#xff0c;钱能get到的最多MM数量&#xff0c;确保最多数量下的最少时间花费。 将人品&#xff0c;钱作为…
阅读更多...
开关电源测试设备的自动化测试与测试项目

开关电源测试设备的自动化测试与测试项目

在军工、工业自动化控制、医疗设备等关键领域&#xff0c;开关电源扮演着至关重要的角色。而如何确保这些电源的质量与性能&#xff0c;开关电源自动测试设备为我们提供了答案。 开关电源测试 开关电源测试是为了检测电源的性能和质量&#xff0c;从而全面测试开关电源的各项参…
阅读更多...
【Blender】快捷键_ 学习日志_01

【Blender】快捷键_ 学习日志_01

【Blender】快捷键_ 学习日志_01 学习了blender的快捷键的使用。 2024年8月30日 视角操控 围绕中心旋转&#xff1a;按住鼠标中建 平移视角&#xff1a;Shift鼠标中键 视角前进后退&#xff1a;滚动滚轮 视图切换 0 切换到摄像机视图 1 切换正试图 2&#xff0c;4&…
阅读更多...
【赵渝强老师】Redis的管道Pipeline

【赵渝强老师】Redis的管道Pipeline

Redis使用的是客户端-服务器&#xff08;C-S&#xff09;模型和请求/响应协议的TCP服务器。这意味着通常情况下一个请求会遵循以下步骤&#xff1a; 第一步&#xff1a;客户端向服务端发送一个查询请求&#xff0c;并监听Socket返回&#xff0c;通常是以阻塞模式&#xff0c;等…
阅读更多...
★ 算法OJ题 ★ 力扣11 - 盛水最多的容器

★ 算法OJ题 ★ 力扣11 - 盛水最多的容器

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;我将和大家一起做一道双指针算法题--盛水最多的容器~ 目录 一 题目 二 算法解析 三 编写算法 一 题目 11. 盛最多水的容器 - 力扣&#xff08;LeetCode&#xff09; 二 算法解析 解法1&#xff1a;暴力枚举 …
阅读更多...
react项目登录使用验证码

react项目登录使用验证码

react项目登录使用验证码 imgSrc 的格式是base64 <Row style{{ width: 350 }}><Col><Form.Itemname"verifyCode"rules{[{required: false,message: "请输入验证码!",},]}><Inputstyle{{ width: 213, height: 50 }}placeholder"…
阅读更多...
精准操控，稳如磐石：飞控+综控系统仿真揭秘

精准操控，稳如磐石：飞控+综控系统仿真揭秘

1.背景 现代飞行器系统中&#xff0c;飞行控制系统和综合控制系统的协同工作是实现精准打击和高度可靠性的关键。 飞行控制系统简称飞控系统&#xff0c;负责飞行器的飞行控制和姿态调整&#xff0c;确保飞行器在飞行过程中维持稳定和精确的轨迹。其主要进行姿态控制、轨迹调…
阅读更多...
Redis缓存穿透、缓存击穿与缓存雪崩的详细讲解和案例示范

Redis缓存穿透、缓存击穿与缓存雪崩的详细讲解和案例示范

在高并发的电商交易系统中&#xff0c;Redis缓存的使用可以极大地提高系统的性能。然而&#xff0c;缓存机制也面临着一些挑战&#xff0c;尤其是缓存穿透、缓存击穿和缓存雪崩问题。这些问题如果处理不当&#xff0c;可能导致系统的性能大幅下降&#xff0c;甚至出现系统崩溃的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023