当前位置: 首页 > article >正文

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

目录

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

分包的作用

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

分包加载具有以下优势:

承载更多功能:小程序单个代码包的体积上限为 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.kler.cn/news/313485.html

相关文章:

  • 错题集锦之C语言
  • NumPy库学习之argmax函数
  • C++【类和对象】(一)
  • 数据结构--图
  • k8s的基础
  • YOLOv8改进,YOLOv8替换主干网络为VanillaNet( CVPR 2023 华为提出的全新轻量化架构),大幅度涨点
  • Remix在SPA模式下,出现ErrorBoundary错误页加载Ant Design组件报错,不能加载样式的问题
  • 使用注意力机制可以让你的模型更加灵活,但是需要额外的计算资源。rnn lstm bilstm attension
  • 【论文阅读】PERCEIVER-ACTOR: A Multi-Task Transformer for Robotic Manipulation
  • 开关磁阻电机(SRM)系统的matlab性能仿真与分析
  • python知识点100篇系列(17)-替换requests的python库httpx
  • Python学习
  • yolo自动化项目实例解析(四)ui页面整理1 (1.85)
  • git merge如何忽略部分路径
  • sqli-lab靶场学习(四)——Less11-14(post方法)
  • 微信小程序中的实时通讯:TCP/UDP 协议实现详解
  • Closure 是个数据结构
  • 如何在 Ubuntu 上安装 OpenSSH Server ?
  • DataFrame生成excel后为什么多了一行数字
  • 计算机的编程
  • 华为OD机试 - 信号强度(Python/JS/C/C++ 2024 E卷 100分)
  • 【设计模式】创建型模式(四):建造者模式
  • 前端设计之 主页面、书架页面、数据分析页面
  • 搜索引擎onesearch3实现解释和升级到Elasticsearch v8系列(二)-索引
  • 【RabbitMQ】死信队列、延迟队列
  • windows下用cmake编译腾讯云的对象存储COS的XML C++SDK
  • java通过org.eclipse.milo实现OPCUA客户端进行连接和订阅
  • 2-93 基于matlab的无人机FMCW(频率调制连续波)毫米波高度计雷达仿真
  • axios(基于Promise的HTTP客户端) 与 `async` 和 `await` 结合使用
  • 中级练习[5]:Hive SQL用户行为与商品价格综合分析