;

小程序分包如何规划,主大小不在是困扰

2024-06-13 阅读:96
;
您当前位置:首页 | 新闻列表 | 新闻详情

主包、独立分包、分包:

  • 分包的根目录不能是另一个分包的子目录
  • tab必须在主包中
  • 分包的JS文件不能相互共享,但使用分包异步化不受此限制
  • 分包可以共享主包的资源(独立分包除外)
	
js
复制代码
/** app.json 1. app.json文件中,最外层page数组中的页面,既是包仅有一个 2. subpackages数组中的页面,即是容,分包可以有多个 3. 分包中有字段`independent`为true时,即为独立分包,独立分包可以有多个 */ { // 主包 "pages":[ "pages/index", "pages/logs" ], // 分包 "subpackages": [ // 普通分包 { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, // 独立分包 { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ], "independent": true } ] }

主包/分包:

  • 主包仅能有一个,分包可以有多个
  • App只能定义在主包中
  • tabbar页面必须在主包中

分包/独立分包:

  • 独立分包加载时,可以不下载主包,普通分包加载时需要下载主包
  • 独立分包不可以依赖主包内容,包括js、wxss、自定义组件、插件等(使用分包异步化时,js、自定义组件、插件不受此限制)
  • 主分包中的app.wxss对独立分包无效,应避免在独立分包中使用
  • 独立分包中不支持使用插件
  • 独立分包可以调用getApp({allowDefault:true})创建临时App对象

分包预下载: 在app.json中加preloadRule字段实现预下载包

	
js
复制代码
// app.json { "pages": ["pages/index"], "subpackages": [ { "root": "important", "pages": ["index"], }, { "root": "sub1", "pages": ["index"], }, { "name": "hello", "root": "path/to", "pages": ["index"] }, { "root": "sub3", "pages": ["index"] }, { "root": "indep", "pages": ["index"], "independent": true } ], "preloadRule": { "pages/index": { "network": "all", "packages": ["important"] }, "sub1/index": { "packages": ["hello", "sub3"] }, "sub3/index": { "packages": ["path/to"] }, "indep/index": { "packages": ["__APP__"] } } }

preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:

字段 类型 必填 默认值 说明
packages StringArray 进入页面后预下载分包的 root 或 name。__APP__ 表示主包。
network String wifi 在指定网络下预下载,可选值为:all: 不限网络wifi: 仅wifi下预下载

跨包资源引用:除了非独立分包可以依赖主包之外,其他分包之前是不能相互引用资源的,但启用分包异步化功能可实现跨包资源引用。

跨分包组件引用:按需注入+用时注入(占位组件)+分包预加载

	
js
复制代码
// subPackageA/pages/index.json "pages": ["pages/index"], "subpackages": [ { "root": "important", "pages": ["index"], }, { "root": "subPackageB", "pages": ["index"], }, ], "lazyCodeLoading": "requiredComponents" // 按需引入 { "usingComponents": { "button": "../../commonPackage/components/button", "list": "../../subPackageB/components/full-list", // 跨包自定义组件 "simple-list": "../components/simple-list", "plugin-comp": "plugin://pluginInSubPackageB/comp" }, "componentPlaceholder": { "button": "view", // 占位组件 "list": "simple-list", // 占位组件 "plugin-comp": "view" // 占位组件 }, // 分包与下载 "preloadRule": { "pages/index": { "network": "all", "packages": ["subPackageB"] }, } }

跨分包js引用:

	
js
复制代码
// subPackageA/index.js // 使用回调函数风格的调用 require('../subPackageB/utils.js', utils => { console.log(utils.whoami) // Wechat MiniProgram }, ({mod, errMsg}) => { console.error(`path: ${mod}, ${errMsg}`) }) // 或者使用 Promise 风格的调用 require.async('../commonPackage/index.js').then(pkg => { pkg.getPackageName() // 'common' }).catch(({mod, errMsg}) => { console.error(`path: ${mod}, ${errMsg}`) })

如何规划分包:

  • 解决问题:随着功能迭代,项目包体积越来越多,影响小程序性能、甚至超过小程序体积范围2M,出现无法打包、代码上传等问题
  • 分包好处:项目有更大的体积,承载更多功能;提升项目性能、用户体验

image.png

分包建议:

  1. 根据功能模块拆分:微信小程序的功能模块拆分成不同的子包。比如:tabbar 模块、用户模块、推送模块等等。

  2. 根据资源引用拆分: 自定义组件、JS 文件、静态资源仅被一个分包使用时则把它划为同一个分包中,如果是公共的资源被各个分包使用,则将其划为主包。

  3. 分包预下载配置: 通过分包预下载机制,在用户需要时能够快速加载,配置 preloadRule 后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度,减少用户等待时间,提升用户体验。


作者:叶同学
链接:https://juejin.cn/post/7378143151889072162

上一篇:微信小程序常见的基础应用场景 下一篇:公司想做个小程序,如何根据自己业务来制定小程序的开发需求

推荐信息

更多+

    联系我们

  • 电话 :134-8274-2882
  • QQ:1059681242
  • 邮箱:haoljq@163.com
  • 地址:上海市松江区米易路166号交科医疗健康产业园(2楼)

在线预约

  • 您的姓名
  • 联系电话

友情链接:

小程序开发 小程序定制开发 小程序商店 微信小程序开发文档 分销商城小程序 电商小程序开发 百家号 商城小程序 微信小程序开发API 小程序定制 生鲜小程序 全平台开发 网站建设 外包开发 自主研发产品 sitemap robots

热门地区:

松江开发公司 青浦开发公司 崇明开发公司 杨浦开发公司 宝山开发公司 奉贤开发公司 虹口开发公司 闵行开发公司 长宁开发公司 静安开发公司 黄浦开发公司 嘉定开发公司 徐汇开发公司 金山开发公司 上海开发公司 南昌开发公司 杭州开发公司 上饶开发公司

COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED

版权所有 上海观智网络科技有限公司

在线
客服

在线客服服务时间:9:00-21:00

选择下列咨讯方式马上在线沟通:

客服
热线

134-8274-2882
小程序定制开发已服务600+

特价
商城

商城小程序助力每个商家获客盈收

来电咨讯获取商城方案,报价功能清单

小程
序码

扫码加微信咨询
顶部