Before the subcontracting function comes out, the code volume of small program cannot exceed 2M, which cannot meet some business requirements, especially for mall small programs with many pictures. After the iteration of wechat small program version, subcontracting loading emerges as The Times require

First, why to subcontract?

  1. The size of the compressed package must not be larger than 2M. Otherwise, the package cannot be compiled and published.
  2. In actual projects, when the volume is larger than 2M, it needs to release and upload through the subcontracting mechanism.
  3. Subcontracting small programs can optimize the download time of the first startup of small programs, because the volume of the main package is smaller after subcontracting, which effectively improves the user experience.
  4. The small program is divided into different subpackages, which are packed into different subpackages during construction. The user can load the program according to the needs when using, which improves the program performance.

Ii. Subcontracting size limitation

As can be seen from the details of wechat development tool -> Project configuration, if subcontracting is not adopted, the total size of the small program cannot exceed 2M; if subcontracting is adopted, the total size can reach 20M, but the volume of the main package and single subcontracting cannot exceed 2M.

​​​

Form of subcontracting

1. Conventional subcontracting

Json subpackages 1) Declare the project subpackage structure in the app.json subpackages field as follows:

​

2) app.json file

Subcontracted files can be placed in the page, but in order to better distinguish the subcontracted code and the main package code in the directory, so I created a new Packages folder in the pages level to separate the subcontracted code, the name and directory location can be determined according to their own needs.

​

3) Jump to the subcontracting page and pay attention to the path

wx.navigateTo({url: '/packages/familyPackage/pages/familyList/familyList'})
Copy the code

4) characteristics

A. When loading the small program, load the main package first, and load the subpackage only when it needs to visit the subpackage page;

B. The subcontractor can access the contents of the main package, including but not limited to files, data, pictures and other contents, which can be understood as the subcontractor does not divide;

2. Independent subcontracting

Independent subcontracting is a special type of subcontracting in small programs that can operate independently of the main package and other subcontracting. You can have multiple independent subcontractors in a small program. Common application scenarios are as follows: AD or event page

1) Through inapp.jsonthesubpackagesField is defined in the corresponding subcontracting configuration itemindependentThe subcontracting corresponding to the field declaration is independent subcontracting

{
 "subPackages": [
    {
      "root": "packages/familyPackage",
      "pages": [
        "pages/familyList/familyList"
      ]
    },
    {
      "root": "packages/intelligentPackage",
      "pages": [
        "pages/manual/manual",
        "pages/automatic/automatic"
      ],
      "independent": true
    }
  ],
}
Copy the code

2) the characteristics of

A. When entering the mini program from the page of independent subcontracting, it is not necessary to download the main package first (it is necessary to download the main package for conventional subcontracting);

B. Independent subcontracting cannot rely on the content of other packages, which can be understood as an independent entity, but it can jump from the independent subcontracting page to the main package or regular subcontracting page;

C. App cannot be defined in independent subcontracting, which will cause unexpected behavior; At the same time, independent subcontracting does not support the use of plug-ins;

3) Matters needing attention

A. When independent subcontracting is running, it is assumed that the user has not entered the page of ordinary subcontracting or the main package, and the App is not registered, so getApp() cannot get the App object. Due to this limitation, the developer cannot share global variables of independent subcontracting and other parts of the small program through the App object. To meet this requirement in standalone subcontracting, the base library version 2.2.4 starts with getApp supporting the [allowDefault] parameter, returning a default implementation if App is not defined. When the main package is loaded and the App is registered, the properties defined in the default implementation are overridden and merged into the real App.

4) Compatibility with lower versions

When running in wechat with a version lower than 6.7.2, independent subcontracting is treated as ordinary subcontracting and does not have the characteristics of independent operation. In compatibility mode, app.wxSS in the main package may have an impact on pages in separate subcontracting, so avoid using the style in app.wxSS in separate subcontracting pages.

5) aboutAppThe life cycle

The onLaunch and first onShow of the App in the main package are called when the main package or other normal package pages are first entered from the independent package page when the applet is launched from the independent package page. Since App cannot be defined in independent subcontracting, monitoring of the applet life cycle can be done using wx.onAppShow, wx.onAppHide. Other events on the App can be listened for using wx.onError, wx.onPageNotFound.

Iv. Subcontracting pre-download

1) Through inapp.jsonincreasepreloadRulePackages are arrays that can be configured. If _APP_ is set to preloading the main package, the preloading of the main package is from the independent subpackage to the main package or regular subpackage

​

​

2) effect

​

3) Matters needing attention

Pages in the same subcontract have a common pre-download size limit of 2M, which is verified when packaged in the tool.

For example, both page A and page B are in the same subcontract. Subcontract with A total size of 0.5m can be pre-downloaded in A, and subcontract with A total size of 1.5m can be pre-downloaded in B at most.

4) characteristics

A, when loading the current package can be set to pre-download other packages;

B. Shorten user waiting time and improve user experience;

Five, check the size of each package

You can see the main package and the size of each package in the project Details -> Basic Information local code

​

That’s the end of the article!

Ps: simple record of learning and growth process, if there is no rigorous, welcome to exchange!