A small program on the code package restrictions

Normally, the entire code package is downloaded when the applet is started for the first time. Therefore, if the code package is too large, the initial startup time of the applet will be affected. So applet officials have size limits on code packages.

1.1 Limitations of applets

  1. Normally, applets limit code packages to a maximum size of 2 MB, beyond which you cannot preview or upload code
  2. In the case of subcontracting loading, the limits are: the size of each package does not exceed 2M, and the total size of all packages does not exceed 16M.

1.2 How do I Check the Size of the code package

Click the upper right corner of wechat developer tools – details, you can see the code package size at the bottom, including the size of the local code package, the size of the last preview code package, the size of the last upload code package:

If subcontracting is configured, click the drop-down arrow to see the size of each subcontracting:

How to solve the problem of too large code package

2.1 Subcontract loading

Subcontracting loading is an official solution provided by wechat. The whole idea is to divide the code into different packages and load the code of the package only after opening a page in the package, so as to optimize the download time of the small program for the first time.

There are several points to pay attention to in subcontracting:

  1. Subpackages are used for subpackage path declarations. Directories outside the subpackages configuration path are packaged into the main package
  2. The path configured in tabBar must be placed in the main package
  3. Resources of different subcontractors cannot refer to each other, but they can all refer to resources in the main package

2.2 Storing Static Resources on the Server

For example, image resources used in a project can be stored in a graph bed or a dedicated static resource server to reduce the space they take up on code packages. This approach is beyond the scope of this article and will not be discussed here.

Third, subcontracting loading practice

Take a subcontract as an example:

3.1 Divide project pages according to certain logic

This step can be divided according to the business logic of the project, or according to the frequency of use of different pages. In this example, the pages other than tabBar are subcontracted directly:

// tabBar"pages/index/index"."pages/logs/logs"// packageA"pages/parent/parent"."pages/child/child"
Copy the code

3.2 Configuring a Path in app.json

Configure a subpackages property with a value of an array. Each object in the array is a subcontract. In each subcontract, several attributes need to be configured:

  1. Root: The root path of the subcontract
  2. Pages: The page path in this subcontract, where the page path is the relative path to the subcontract root path
{
  "pages": [
    "pages/index/index"."pages/logs/logs"]."subpackages": [{"root": "pages/packageA"."pages": [
        "child/child"."parent/parent"]}],}Copy the code

3.3 A file directory is generated after the page is saved

After the app.json file is configured and saved, the corresponding directory is automatically generated as follows:

Note: in the newly generated directory, the files are initialized, but the parent and child files of the original path still exist, so you need to manually migrate the code

3.4 Migrate the corresponding code to the newly generated file directory

In this step, you migrate the file code from the original path to the newly generated directory and delete the files from the original path

3.5 Changing the path used in the Project

At this point, subcontracting is configured, but there is still a problem to solve: changing the reference path in the project, for example, the original reference path looks like this

gotoChild() {
    wx.navigateTo({
      url: '/pages/child/child'})},Copy the code

Need to change to the latest path:

gotoChild() {
    wx.navigateTo({
      url: '/pages/packageA/child/child'})},Copy the code

< About us >

We are one front-end programmer monkey + one front-end programmer girl from the imperial capital.

The articles posted here are a summary of what we have learned and are expected to be updated at least once a week.

At present our learning plan is: small program actual combat => VUE advanced usage => VUE principle => CSS foundation => ES6 => JS in-depth

In addition, some of the technologies and functions used in the work will be summarized and updated here in time

If the article is wrong or not clear, welcome to leave a message feedback ~~