微信小程序分包

在主包达到1.5M时新增模块,需要作分包处理。

打包原则

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

引用原则

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

pages 为主包目录

subpackages 为分包,root 代表分包的跟路径。pages是页面

1、修改分包配置:app.json

*注意 *:保存后你会发现packageA/pages/cat,会自动生成对应的目录。

{
// pages 是主包内容
  "pages":[
    "pages/index",
    "pages/logs"
  ],
// subpackages 是分包内容
  "subpackages": [
    {
      "root": "packageA", 
      "pages": [
        "pages/cat"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple"
      ]
    }
  ]
}

2、新增分包目录:packageA

在小程序跟目录新增 packageA 与主包的pages 平级,对应app.json 目录。

为了规范管理,尽量在根目录建分包,且使用package等前缀标识此目录。

3、关于跳转:按照目录跳转 packageA/pages/cat

  wx.navigateTo({url:"packageA/pages/cat"})

4、查看分包

打开代码依赖分析,查看代码包,页面测试跳转成功

恭喜你,分包成功! 可以上传代码了~

### 微信小程序分包使用指南 #### 分包概述 微信小程序支持将代码分割成多个子包,每个子包可以独立加载。这有助于减少初始加载时间并优化性能[^4]。 #### 主包与分包的关系 主包是指启动时默认加载的部分,而分包则是按需加载的内容。主包中通常会包含一些公共资源,如公用组件和API接口文件等。如果发现主包体积过大,则可能是因为其中包含了过多不必要的资源。 #### 如何配置分包结构 为了合理规划小程序架构,在`app.json`文件里定义好各个页面路径的同时也要指定哪些属于分包部分: ```json { "pages":[ "pages/index/index", "pages/logs/logs" ], "subpackages":[ { "root":"packageA", // 子包根目录相对路径 "pages":[ // 子包内的页面列表 "index/index", "logs/logs" ] } ] } ``` #### 示例代码展示如何访问分包内资源 当需要跳转至某个位于特定分包里的页面时,可以通过如下方式实现导航操作: ```javascript // 假设目标页面位于 packageA 下面 wx.navigateTo({ url: '/packageA/pages/index/index' }); ``` 对于跨包间的数据传递或者事件触发机制,建议采用全局状态管理库(如 Redux 或 MobX),或者是利用自定义事件来完成通信需求。 #### 性能考量 为了避免因过度拆分子包而导致复杂度增加以及维护成本上升的情况发生,应该谨慎评估每一个待分离模块的实际价值及其对整体效率的影响程度。同时注意控制各分包间的耦合关系,保持良好的解耦设计原则。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值