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

目录

分包的作用

微信小程序性能与体验优化官网解释

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

分包加载具有以下优势:

承载更多功能 :小程序单个代码包的体积上限为 2M,使用分包可以提升小程序代码包总体积上限,承载更多的功能与服务。

降低代码包下载耗时:使用分包后可以显著减少启动时需要下载的代码包大小,在不影响功能正常使用的前提下,有效降低启动耗时。
降低小程序代码注入耗时 :若未开启按需注入,小程序编译时会将所有 js 文件打包成同一个文件一次性的注入,并执行所有页面和自定义组件的代码。分包后可以降低注入和实际执行的代码量,从而降低注入耗时。
降低页面渲染耗时 :使用分包可以避免不必要的组件和页面初始化。

降低内存占用:分包能够实现页面、组件和逻辑较粗粒度的按需加载,从而降低内存的占用。

文件分包

微信开发者工具官网分包加载

将要分包出来的文件新建文件夹,独立出来,目录结构如下:

javascript 复制代码
├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

分包配置

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

javascript 复制代码
    "mp-weixin" : {
        "optimization" : {
            "subPackages" : true // 设置为true
        },
    },

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

javascript 复制代码
{
  "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 中,每个分包的配置有以下几项:

字段 类型 说明
root String 分包根目录
name String 分包别名,分包预下载时可以使用
pages StringArray 分包页面路径,相对于分包根目录
independent Boolean 分包是否是独立分包
entry String 分包入口文件

注意事项

打包原则

  • 声明 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 或以上版本的微信开发者工具,正式环境没有版本需求。

相关推荐
佩淇呢20 分钟前
uniapp vue3 梯形选项卡组件
前端·vue.js·uni-app
开利网络1 小时前
综合探索数字化转型的奥秘与前景
运维·微信小程序·自动化·产品运营·数字化营销
张人玉4 小时前
微信小程序开发——比较两个数字大小
微信小程序·小程序
[廾匸]4 小时前
uni-app获取设备唯一值、静态IP以及公网IP的方法
uni-app·ip·imei·唯一值
计算机学姐7 小时前
基于微信小程序的食堂点餐预约管理系统
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
罗_三金8 小时前
微信小程序读写NFC标签(实现NFC标签快速拉起小程序)实战
前端·javascript·微信小程序·小程序
双普拉斯8 小时前
微信小程序实现转盘抽奖,可以自定义编辑奖项列表
javascript·微信小程序·小程序
说私域10 小时前
开源 AI 智能名片链动 2+1 模式 O2O 商城小程序在社群活动中的应用与时机选择
人工智能·小程序
luckycoke11 小时前
小程序的右侧抽屉开关动画手写效果
前端·javascript·微信小程序·uni-app
金灰12 小时前
wx小程序渗透思路
网络·windows·安全·小程序·notepad++