• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

I. Small program subcontracting

Each subcontracting applet must contain a main package. The main package, which places the default startup page /TabBar page, and some common resource /JS scripts for all the subpackages; Subcontracting is divided according to the developer’s configuration.

When the small program starts, the main package will be downloaded and the page in the main package will be started by default. When the user enters a page in the subpackage, the client will download the corresponding subpackage and display it after downloading

Currently, the subcontracting size of small program has the following limitations:

  • The whole small program all subcontracting size is not more than 20M
  • The size of a single subcontract/main package cannot exceed 2M

Subcontracting the applets optimizes the download time for the first startup of the applets and allows better decoupling and collaboration when multiple teams work together.

Click here directly to see the official subcontracting tutorial easy to understand

Ii. Uniapp subcontracting applets

App defaults to a whole package. Subcontracting configuration compatible with applets. It is not intended for download acceleration, but for startup acceleration when the home page is vUE.

This is the directory structure after I subcontracted the applets

​

  • Components: Common components (referenced by the main package)
  • Page_ followed by pinyin are subcontracting
  • Components in a subcontract are the subcontract’s own component directory. References to the subcontract’s vue page can only be referenced under the subcontract’s own page_ZHAOshang directory
  • Pages is the main package, which contains the launch page /TabBar page
  • Static is a public static resource, an image class

Subcontracting steps:

1. Configure the manifest. Json

“mp-weixin”: {

“optimization”:{“subPackages”:true}

}

​

Optimize subcontracting:

Add “optimization”:{“subPackages”:true} under the platform configuration (manifest.json) to enable subPackages

Currently, subcontracting optimization of MP-Weixin, MP-QQ and MP-Baidu is only supported

  • Static files: Under subcontracting, static resources such as static resources are copied. That is, static resources placed in subcontracting directories are not packaged into the main package and cannot be used in the main package
  • Js file: When a JS is referenced by only one subpackage, it will be packaged into that subpackage, otherwise it will still be shipped to the main package (i.e. referenced by the main package, or referenced by more than one subpackage).
  • Custom component: If a custom component is referenced by only one subcontract and is not included in the subcontract, a message will be displayed at compile time

2. Configuration pages. Json

Json file containing two parameters: 1. Root: indicates the root directory of the subPackages. 2.

Note: The main package and subcontracting cannot be in the same directory. When building the UNIAPP project, we can consider the directory structure for later subcontracting.

​

3. PreloadRule

This step is mainly done to optimize speed, those who do not want to optimize speed can skip this configuration

After preloadRule is configured, when entering a certain page of the mini program, the framework automatically preloads the subcontracting that may be needed, which improves the startup speed when entering the subsequent subcontracting page

In preloadRule, key is the path to the page, and value is the pre-downloaded configuration to enter the page. Each configuration has the following items:

field type mandatory The default value instructions
packages StringArray is There is no Enter the page after the pre-download subcontractedroot 或 name.__APP__Represents the primary package.
network String no wifi For pre-download on a specified network, the options are as follows: all (unlimited network), wifi (pre-download on wifi only)

App subcontracting also supports preloadRule, but network rules are not valid.

Example:

​

Finally, click into the official uniApp document to view the configuration items

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Bloggers are honest and answer questions for free ❤

One student will be selected from the comment section of each article to give a mug * 1