The package of the applet is limited to less than 2M. When it exceeds, click to preview and find an error:
Error: 代码包大小为 3701 kb，上限为 2048 kb，请删除文件后重试
Solution:
-
Optimize the code and delete unused code
-
Image compression or upload server
Generally, pictures take up a lot of space, so try not to put them in the local folder of the applet. If there are not many pictures, we can also compress the pictures. The picture compression platform I often use: click here;
You can also upload pictures to the server for external link references. We use Alibaba Cloud oss storage, and you can also host pictures through a picture hosting platform. The picture hosting platform I found: click here;
In addition, the uni app project created through the cli command can put pictures or font icons into the assets folder, and import them through require, which can also reduce the size of the main package
- Packet loading
The official launch of the function of subpackage loading of small programs is undoubtedly great news for thousands of small program developers. Regarding how to subpackage, WeChat official documents have explained very clearly. It is recommended to read carefully before subcontracting official documentation.
For users, the loading process of the applet becomes:
1. Start for the first time, load the main package of the applet, and display the page in the main package
2, if the user enters a subpackage page, load the corresponding subpackage again, and display the subpackage page
Using sub-package loading, for developers, the applet can have a larger code size and carry more functions and services. For users, the applet can be opened faster without affecting the startup speed. Use more functions below.
Division of subcontracting:
Before configuration, developers first need to plan the content that each subpackage needs to accommodate. It is recommended that developers place pages and logic under the same function in the same directory according to the principle of function division. Logic, put it under the main package, so as to ensure that this part of the logic must exist when the subpackage refers to this part of the function.
When subcontracting, the following should be paid attention to:
1. Avoid the coupling of references between subpackages and subpackages. Because the loading of a subpackage is triggered by a user operation, there is no guarantee that another subpackage must exist when the subpackage is loaded. At
this time, it may cause js logic exceptions and errors that some resources cannot be found;
2. Some public utilities 3. When using the tab switch that comes
with the applet, the pages in the list need to be placed in the main package.
Subpackage configuration: (WeChat client 6.6.0, basic library 1.7.3 and above are supported.)
After clarifying the division of subcontracts, you can configure subcontracts. This step is not complicated.
Assume that the directory structure of the applet supporting subpackage is as follows:
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
The developer declares the project subpackage structure in the app.jsonsubPackages field:
{
"pages":[
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
Currently, the subpackage size of Mini Programs has the following restrictions:
The size of all subpackages of the entire applet does not exceed 20M, and
the size of a single subpackage/main package cannot exceed 2M
Compatible with lower versions:
The compatibility of the old version of the client is handled by WeChat background compilation. The background will compile two code packages, one is the code after subcontracting, and the other is the compatible code of the whole package. New clients use subpackages, while old clients still use the whole package. The full package will put the paths in each subpackage into pages.
Example project:
Download the source code of the applet sample (sub-package loading version)
Next, briefly introduce the use in different frameworks:
1. In the uni app:
The directory structure of the applet initialized by uni app through cli is as follows:
├── src
├── main.js
├── App.vue
├── pages.json
├── manifest.json
├── orderPackages
│ └── pages
│ ├── goodsDetail
│ └── myorder
├── pages
│ ├── index
│ └── user
└── utils
The subPackages field needs to be configured in pages.json::
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "个人中心"
}
}
],
"subPackages": [{
"root": "orderPackages",
"pages": [{
"path": "pages/goodsDetail/goodsDetail",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/myorder/myorder",
"style": {
"navigationBarTitleText": "我的订单"
}
}
]
}]
}
Jump to the subpackage page path in the page:
uni.navigateTo({
url: `/orderPackages/pages/order/order`
})
2. In taro:
The applet directory structure initialized by taro is as follows:
├── src
├── app.js
├── app.scss
├── index.html
├── packageA
│ └── pages
│ ├── goodsDetail
│ └── myorder
├── pages
│ ├── index
│ └── user
└── utils
The subPackages field needs to be configured in app.js:
config = {
pages: [
'pages/index/index',
'pages/user/user'
],
subPackages: [
{
'root': 'packageA',
'pages': [
'pages/goodsDetail/goodsDetail',
'pages/myorder/myorder'
]
}
]
}
Jump to the subpackage page path in the page:
taro.navigateTo({
url: `/orderPackages/pages/order/order`
})
The above only lists the steps of subpackage loading of uni app and taro frameworks. The subcontracting method of native applets can be quickly implemented according to official documents. Although there are many applet frameworks, most of them are similar. If other frameworks are used for development in the future, supplements will be made .