mpvue小程序分包遇到的坑

2019-3-31 9:38:00 342 views

功能模块

最近做的一个小程序项目,类似钉钉,可扩展性强,模块比较多。在技术选型时选择了mpvue,考虑到小程序主包最多只能2M的限制,当一个主包文件过多时,坑定面临着性能低,卡顿的情况。所以采用了分包的加载机制,将各个模块解耦。

微信官方的分包

微信官方的是原生小程序,这样没问题。但是mpvue同级分包是会报错的。只能在pages中进行分包,具体分包如下。

项目目录结构

配置文件

subpackages 中,每个分包的配置有以下几项:

字段类型说明
rootString分包根目录
nameString分包别名,分包预下载时可以使用
pagesStringArray分包页面路径,相对与分包根目录
independentBoolean分包是否是独立分包

可能碰到的问题

写页面时,每个都需要一个个点进去,为了避免过于繁琐。我这里将test模块用于每次页面的写作页面,只需要将主包中的test放在页面堆栈最前面即可。写好后复制黏贴到对应页面即可。

页面路由的问题

页面url是分包下的root和pages的拼接,例如: /pages/work/pages/dayWrite/main

打包原则

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

引用原则

  • packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件
  • packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 template
  • packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源
0

No Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。