当前位置: 首页 > 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/a/313485.html

相关文章:

  • 如何保护 Microsoft 网络免受中间人攻击
  • 【数学二】线性代数-线性方程组-齐次线性方程组、非齐次线性方程组
  • 封装一个省市区的筛选组件
  • react 中 useContext Hook 作用
  • androidstudio下载gradle慢
  • vue请求数据报错,设置支持跨域请求,以及2种请求方法axios或者async与await
  • 错题集锦之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后为什么多了一行数字
  • 计算机的编程