微信小程序要求单包不能超过2M,当我们的小程序体量大的时候,就需要用到分包了,下面就来说说如何实现分包

1、tabBar页面(与最下面的导航栏相关的页面)必须在pages目录下,那么,在pages目录下,我们可以存放登录页面以及tabBar

"pages": [{
			"path": "pages/discovery/discovery",
			"style": {
				"navigationBarTitleText": ""
			}
		},
		{
			"path": "pages/share/share",
			"style": {
				"navigationBarTitleText": ""
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],

2、对于其它子页面,我们可以放在分包中,存放的步骤如下:

前提:在manifest.json文件下找到mp-weixin的配置部分,新增属性optimization

 "mp-weixin" : {
        /* 小程序特有相关 */
        "appid" : "",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
		"optimization":{
			"subPackages":true
		}
    },

1)在根目录下新建一个目录pages_discovery,与pages目录平级

2)然后新建一个uniapp页面,test/test.vue

3)这个时候test.vue页面的路径会在pages数组中,找到并且删除它

4)在pages数组下面声明一个新数组subPackages,用来管理分包的页面,其中root的值为分包的根目录,path就是test.vue页面的路径,这个时候页面的分包就完成了,如果需要有多个分包按照下面的形式声明路径

5)静态资源实现分包,在分包目录下新建一个static目录,把图片放到static目录下

6)访问分包下的静态资源的路径写法如下,这样我们就能实现静态资源的分包

如果第一次的时候访问报错,建议重启项目再查看

当然不是所有的静态资源需要分包,如果有的图片在多个页面都有用到,就可以放在公共资源目录下

7)验证是否分包成功:

     运行项目

     进入微信开发者工具

     点击详情

     点击代码依赖分析

     

    查看是否有主包以外的代码包,若有,就是分包成功

以上便是如何实现微信小程序分包的操作,如果有问题,欢迎在评论区指出!!!

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐