The overall size of small programs can reach 20M

Foreword: (*Methods and explanations are taken from the official)

      Small programs cannot be packaged because they are too small. The latest official package is 20m, and the single file package is 2m.

Official entrance:  https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

table of Contents:

Subcontract loading

Use subcontracting

Configuration method

Packaging principle

Citation principle

Low version compatible

Sample project

Independent subcontracting

Configuration method

limit

Precautions

Low version compatible

Subcontract pre-download

Configuration method

limit

---

Subcontract loading

Wechat client 6.6.0, basic library  1.7.3  and above are now supported. For developer tools, please use version 1.01.1712150 and above, which can be downloaded here .

In some cases, developers need to divide the applet into different sub-packages, which are packaged into different sub-packages during construction, and users load them as needed during use.

When building a small program subcontracting project, the build will output one or more subcontracts. Each use sub- package applet must contain a main package . The so-called main package, which placed the default start page / TabBar page, as well as some all subcontractors are required to public resources / JS script; and subcontracting is divided according to the configuration of the developer.

When the applet is started, the main package will be downloaded by default and the page in the main package will be launched. When the user enters a page in the sub-package, the client will download the corresponding sub-package and display it after the download is complete.

The current small program sub-package size has the following restrictions:

• The size of all sub-packages of the entire mini program does not exceed 20M
• The size of a single subcontract/main package cannot exceed 2M

Subcontracting the applet can optimize the download time of the applet for the first start, as well as better decoupling and collaboration when multiple teams are co-developed.

Use subcontracting

Configuration method

Assume that the directory structure of the applet that supports subcontracting is as follows:

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

The developer subpackages declares the project subcontracting structure in the app.json  field:

Written as subPackages is also supported.

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

subpackages In, the configuration of each subcontracting has the following items:

Field	Types of	Description
root	String	Subpackage root directory
name	String	Sub-package alias, can be used when sub-package pre-download
pages	StringArray	Sub-package page path, relative to sub-package root directory
independent	Boolean	Whether the subcontracting is an independent subcontracting

Packaging principle

• After the declaration  subpackages , it will subpackages be packaged according to the  configuration path, subpackages and the directories outside the configuration path will be packaged into the app (main package)
• app (main package) can also have its own pages (that is, the outermost pages field)
• subpackage The root directory cannot be a subpackage subdirectory within another 
• tabBar The page must be in the app (main package)

Citation principle

• packageA Cannot require packageB JS files, but you can require  JS files in  appyour own package
• packageApackageB The template that can  not be  imported, but you can require  app, the template in your own package
• packageA Unusable  packageB resources, but you can use  appresources in your own package

Low version compatible

The WeChat background compiles to handle the compatibility of the old version of the client. The background will compile two code packages, one is the sub-packaged code, and the other is the compatible code for the entire package. The new client uses subcontracting, and the old client still uses the whole package. The complete package will put  subpackage the paths inside the pages in the pages.

Sample project

Download the source code of the small program example (sub-package loading version)

Independent subcontracting

WeChat client 6.7.2, basic library  2.3.0  and above are supported. For developer tools, please use version 1.02.1808300 and above, which can be downloaded here .

Independent subcontracting is a special type of subcontracting in a small program that can run independently of the main package and other subcontracting. There is no need to download the main package when entering the mini program from the page in the independent subpackage. The main package will only be downloaded when the user enters the page of the ordinary sub-package or the main package.

Developers can configure certain functionally independent pages into independent sub-packages as needed. When the applet is launched from the ordinary sub-package page, the main package needs to be downloaded first; while the independent sub-package does not depend on the main package to run, which can greatly improve the startup speed of the sub-package page.

There can be multiple independent subcontractors in a small program.

Mini games start to support independent subcontracting in the basic library v2.12.2. For details, see  Mini Game Independent Subcontracting Guide .

Configuration method

Assume that the applet directory structure is as follows:

├── app.js
├── app.json
├── app.wxss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── moduleB
│   └── pages
│       ├── pear
│       └── pineapple
├── pages
│   ├── index
│   └── logs
└── utils

The developer declares that the corresponding subcontract is an independent subcontract by defining app.jsona subpackagesfield in the corresponding subcontracting configuration item in the independentfield.

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}

limit

Independent subcontracting is a type of subcontracting. All restrictions of ordinary subcontracting are valid for independent subcontracting. Plug-ins and custom components in independent subcontracting are handled in the same way as ordinary subcontracting.

In addition, pay attention to the following when using independent subcontracting:

• Independent sub-packages cannot rely on the contents of the main package and other sub-packages , including js files, templates, wxss, custom components, plug-ins, etc. The main package is app.wxssinvalid for independent subcontracting, app.wxss and the style in use on the independent subcontracting page should be avoided  ;
• App It can only be defined in the main package, and cannot be defined in the independent subcontract  App, which will cause unexpected behavior;
• The use of plug-ins is temporarily not supported in independent subcontracting.

Precautions

(1) About getApp()

Unlike ordinary subcontracting, when independent subcontracting is running, it App is not necessarily registered, so the   object getApp() may not be obtained  App:

• When the user launches the applet from the independent subcontracting page, the main package does not exist or Appdoes not exist, getApp() and what is obtained by the call at this time  is  undefined. When the user enters the general sub-package or the main package page, the main package will be downloaded and App registered.
• When the user jumps from a normal subcontracting or main package page to an independent subcontracting page, the main package already exists, getApp() and the real one can be obtained by  calling at this time  App.

Due to this limitation, developers cannot App implement independent subcontracting and global variable sharing of other parts of the applet through  objects.

In order to meet this requirement in independent subcontracting, the base library   version 2.2.4 began to  getAppsupport the [ allowDefault] parameter,  App and return a default implementation when it is not defined. When the main package is loaded and App registered, the attributes defined in the default implementation will be overwritten and merged into the real  App one.

Sample code:

• Independent subcontracting

const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}

• app.js

App({
  data: 123,
  other: 'hello'
})

console.log(getApp()) // {global: {}, data: 456, other: 'hello'}

(2) About the  App life cycle

When starting the applet from an independent subcontracting, App the onLaunch sum  in the  main package  onShow will be called for the first time when entering the main package or other ordinary subcontracting pages from the independent subcontracting page for the first time.

Since it cannot be defined in the independent subcontracting,  Appthe monitoring of the life cycle of the applet can be  completed by using  wx.onAppShow and wx.onAppHide . App Other events on the above can be  monitored using  wx.onError and wx.onPageNotFound .

Low version compatible

When running in WeChat versions lower than 6.7.2, independent subcontracting is regarded as ordinary subcontracting processing and does not have the characteristics of independent operation.

Note: In the compatibility mode, the content in the main package  app.wxss may affect the pages in the independent sub-package, so avoid using app.wxss the styles in the independent sub-package pages  .

Subcontract pre-download

The basic library 2.3.0 is supported, and the lower version needs to be compatible . For developer tools, please use version 1.02.1808300 and above, which can be downloaded here .

Developers can configure that when entering a certain page of the applet, the framework automatically pre-downloads the sub-packages that may be needed to improve the startup speed when entering the subsequent sub-package pages. For independent subcontracting , the main package can also be pre-downloaded.

Pre-downloading of sub-packages currently only supports the use of configuration methods, and does not currently support completion by calling API.

preloadSubpackagesThe log information at the beginning of vConsole can be used to verify the pre-download.

Configuration method

The pre-download subcontracting behavior is triggered when entering a certain page and is  controlled by  app.json adding  preloadRuleconfiguration.

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

preloadRule Middle, key is the page path, value is the pre-download configuration to enter this page, each configuration has the following items:

Field	Types of	Required	Defaults	Description
packages	StringArray	Yes	no	After entering the page, pre-download the sub-package  root or  name. __APP__ Represents the main package.
network	String	no	wifi	Pre-download under the specified network, the optional values ​​are all:: Unlimited network wifi: Only pre-download under wifi

limit

Pages in the same subpackage share a common pre-download size limit of 2M, and the limit will be verified when packaged in the tool.

For example, pages A and B are both in the same subpackage, and subpackages with a total size of 0.5M are pre-downloaded in A, and subpackages with a total size of 1.5M can only be pre-downloaded in B.