Mini Program
取消
Development
中文
EN
取消
  • Guide

    • # Code pack size optimization

    The most direct means of startup performance optimization is to lower the code pack size ** **. Code pack size directly affects download time and affects the user's experience when starting Weixin Mini Program-0]].

    Developers can optimize the size of their code packages by:

    # 1. Use subcontract loading reasonably

    Recommended for all Weixin Mini Program

    Using ** sub-packageing is the most time-consuming means of optimizing Weixin Mini Program startups. It is recommended that developers divide the pages of the Mini Program according to functions, and split the pages of Mini Programs into different subpackages according to frequency of use and scenarios, so as to implement on-demand loading of code packages.

    Sub-contract loading has the following advantages:

    • Carrying more functions: Weixin Mini Program The maximum size of a single code package is 2M, and the use of sub-packageing can increase the maximum size of the Mini Program code package to carry more functions and services.
    • Reduce code pack download time: Using sub-packages can significantly reduce the size of code packs that need to be downloaded at startup, effectively reducing startup time without affecting normal functional use.
    • Reduce Weixin Mini Program code injection time: If is not turned on, inject on demand, the Mini Program compiles a single injection of all the js files into a single file and executes all the page and custom components code.Sub-contracting can reduce the amount of code that is injected and actually executed, thereby reducing the injection time.
    • Reduce page rendering time: Using sub-packages can avoid unnecessary components and page initialization.
    • Reduce memory usage: Subcontracting enables the on-demand loading of pages, components, and logic with a higher coarseness, thereby reducing memory usage.

    In addition, several extended features of sub-packaged loading can be combined to further optimize startup time:

    1.1 ** Independent sub-packageing **

    In some scenarios (such as advertising pages, activity pages, payment pages, etc.), the function is usually not very complex and relatively independent, and the start-up performance is very high. Separate sub-packages can operate independently of the main contract and other sub-packages. You don't need to download the master package when you enter the Mini Program from the independent sub-package page. Developers are advised to put some pages that require very high start-up performance into a special standalone subpackage.

    1.2 ** Subcontract pre-download **

    Although Weixin Mini Program can be booted up significantly after using "subload,"However, when the user jumps to the page within the subpackage during the use of the Mini Program, they need to wait for the subpackage to be downloaded before they can enter the page, causing a delay in page switching and affecting the Mini Program usage experience. Subcontract pre-download was designed to solve the problem of latency when you first enter the subcontract page.

    Independent sub-packageing and sub-packageing pre-download can be used together to obtain better results, please refer to independent sub-packageing and sub-packageing pre-download tutorial

    1.3 ** Subcontracting asynchronization **

    "Subcontracting asynchronization" refines Weixin Mini Program sub-packageing from page granularity to component and even file granularity.This allows some of the plug-ins, components, and code logic that would otherwise be placed on pages inside the main package to be stripped into subpackages and loaded asynchronously at runtime, further reducing the package size and code amount required for startup.

    Subcontract asynchronization can effectively solve the problem of overexpansion of the size of the main package.

    # 2. Avoid unnecessary global custom components and plug-ins

    InapagejsonbyusingComponentsGlobally referenced custom components and plug-ins introduced globally throughpluginsdownload and inject JS code with the main package at Weixin Mini Program startup, affecting startup time.

    Even if extensions and some official plug-ins don't take up the main package size, they still require to download and inject JS code at startup, which doesn't differ in the impact of other plug-ins on startup time.

    • If a custom component is only used in a sub-packaged page, it should be defined in the page's configuration file
      • Globally introduced custom components are considered to be required by all sub-packages and all pages, affecting the effectiveness of "on-demand injection" and the time spent on Weixin Mini Program code injection.
    • If the plug-in is used only in a subcontract, only reference the plug-in in the subcontract
      • For example, many Weixin Mini Program uses the Mini Program livestreaming " plug-ins, but the livestreaming function is usually not used in the main package page or is relatively low-frequency, so it is recommended to introduce the Mini Program live streaming plug-ins through sub-packages.
      • If you do need a plug-in to be used in a master package or by multiple subpackages,You can still consider placing the plug-in in a sub-package and introducing **asynchronously in the form of](../../subpackages/async.md) by sub-package asynchronization.

    # 3. Control the source file within the code package

    Weixin Mini Program Source files such as pictures, audio, video, and fonts take up a lot of code package volume and are usually difficult to compress further, which affects the download time much more than the code file.

    It is recommended that the developer should only include some small icons in the code package, and avoid including or using base64 inline source file in WXSS.Such files should be deployed to the CDN whenever possible and introduced using URL.

    # 4. Clean up useless code and resources in a timely manner

    Except for files that the tool ignores by default or that the developer explicitly declares to ignore, the Weixin Mini Program package will insert all files in the project directory into the package.Third party libraries introduced accidentally, code or dependencies discarded during version iterations, test code not required by the product environment, Unused components, plug-ins, and extension libraries files and resources that are not actually used can also be entered into the code package, affecting the size of the code package.

    It is recommended to use the Code Static Dependency Analysis provided by the WeChat developer tool to periodically analyze the file composition and dependencies of code packages to optimize code packages size and content.For files that should not be included in the Weixin Mini Program code pack for local development debugging only, you can use the packOptions.ignore configuration ignore rules set by the tool.

    When preprocessing Weixin Mini Program code using packaging tools (such as Webpack, Rollup, etc.), you can use features such as tree-shaking to remove redundant code, and be careful to prevent unwanted libraries and dependencies from being introduced when packaging.