When uniapp develops WeChat applets and uploads codes, it may encounter the problem that the project is too large. Today, I will simply record how to deal with the problem that the project code exceeds the limit based on my actual operation.
Commonly used operations are to change the image access in the project from local access to network access, check the relevant compressed file options when uploading code in the WeChat developer tool, etc. Personally, the most effective method is sub-package processing. The volume limit of sub-packages is as follows :
Subpackage volume limit
The volume of all subpackages in the entire applet cannot exceed 16M (the main package + subpackage, it is also said that it cannot exceed 20M, I haven’t tried such a large one, and I haven’t tried it) The size of a single
subpackage/main package cannot exceed 2M
My project introduces uView2.0 and uni-im plug-ins, so if you don’t do any processing, specify more than 2M. Let’s talk about the processing method of subcontracting for uniapp development.
1. Add the following content to hbuilder:
"optimization":{
"subPackages":true
}
Add path: manifest.json–source code settings–mp-weixin node and finally add the above content.
2. Add the subpackage configuration information in page.json
and add the subpages node after the pages node. The configuration content is as follows:
"subPackages": [{
"root": "subpages",
"pages": [
// 此处为pages注册的子页面路径,此处省略子页面的样式配置
{
"path" : "dynamic/dynamic",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
}
,{
"root": "uni_modules",
"pages": [
// 此处为uni_modules注册的子页面路径,分别为会话列表和聊天页面
{
"path" : "uni-im/pages/index/index",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "uni-im/pages/chat/chat",
"style": {
"enablePullDownRefresh": false,
"maxWidth": "960",
"navigationBarTitleText": ""
}
}
]
}
]
In addition to the tabbar-related homepage and my page in the project, the rest of the business code is placed in the subpages folder. Since the uView2.0 and uni-im plug-ins are introduced in the project, the plug-in installation directory uni_modules is separately regarded as a subpackage, and the configuration method is the same as the business code is configured in the subpages node.
The full version of page.json is as follows
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "铂金"
}
}
,{
"path" : "pages/mine/mine",
"style" :
{
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false
}
}
],
"subPackages": [{
"root": "subpages",
"pages": [
// 此处为pages注册的子页面路径,此处省略子页面的样式配置
{
"path" : "dynamic/dynamic",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
}
,{
"root": "uni_modules",
"pages": [
// 此处为uni_modules注册的子页面路径,分别为会话列表和聊天页面
{
"path" : "uni-im/pages/index/index",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "uni-im/pages/chat/chat",
"style": {
"enablePullDownRefresh": false,
"maxWidth": "960",
"navigationBarTitleText": ""
}
}
]
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {
},
"tabBar": {
"list": [{
"iconPath": "/static/index.png",
"selectedIconPath": "/static/index_select.png",
"text": "首页",
"pagePath": "pages/index/index"
},
{
"iconPath": "/static/mine.png",
"selectedIconPath": "/static/mine_select.png",
"text": "我的",
"pagePath": "pages/mine/mine"
}
]
},
"easycom": {
// 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
// npm安装方式
// "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
}
The project structure is as follows:
After the processing is complete, look at the subpackage size:
it can be seen that the subcontracting has been carried out normally, and the code can be uploaded and published normally!