Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

Wechat mini program subcontracting instructions

In some cases, the developer needs to divide the applets into different subpackages, which are packaged into different subpackages at build time and loaded by users as needed.

When building a applets subcontract project, the build outputs one or more subcontracts. 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

Use the subcontract

Json file, add subPackages. Root is the subPackages path. Multiple subPackages can be used. Pages refers to the page path under the subcontract.

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }],
    "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
}
Copy the code

Independent of the subcontract

Independent subcontracting is a special type of subcontracting in small programs that can operate independently of the main package and other subcontracting. There is no need to download the main package when entering the applet from the standalone subcontracting page. The main package is downloaded only when the user enters the normal package or main package page.

Developers can configure certain functional independence pages into independent subcontracting as needed. When the applets start from the normal subcontracting page, the main package needs to be downloaded first; Independent subcontracting can run independently of the main package, which can greatly improve the startup speed of the subcontracting page.

You can have multiple independent subcontractors in a small program.

"subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}
Copy the code

“Independent “:true is independent subcontracting. Independent subcontracting is not dependent on the contents of the main package and other subcontracting, including JS files, templates, custom components, etc. That is to say, if the subcontract uses the main contractor, do not use it.

Subcontract preload 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.

"preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
Copy the code

Packages: Pre-download the root or name of the package after entering the page. __APP__ represents the main package.

Network: pre-download on a specified network. The value can be all (no network restriction) or wifi (pre-download on wifi only).

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

The subcontract optimization

For wechat, Baidu, QQ, toutiao, you can use “optimization”: {“subPackages”: true} in the manifest.json file for suboptimization.

  • 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

    “mp-weixin” : { “appid” : “wxxxxxxx”, “setting” : { “urlCheck” : false, “postcss” : false, “minified” : true }, “usingComponents” : true, “permission” : { “scope.userLocation” : { “desc” : }}, “plugins” : {“sendCoupon” : {“version” : “1.2.1”, “provider” : “wxxxxxxx” } } “optimization” : { “subPackages” : true } },

Compression vendor. Js

If you are subcontracting with uni-app, you can use runtime compression code for the verndor.js file size.

  • For the project created by HBuilderX check run -> Run to applet emulator -> Whether to compress the code at runtime

  • Cli-created projects can add parameters to package.json –minimize, for example: “dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build –watch –minimize”