How Independent Subpackages Cut WeChat Mini‑Program Startup Time by 30%

Previously, the comprehensive article mentioned that “for pages with strong independence, using independent subpackages can improve startup speed.” This piece explains how Tencent Classroom's mini‑program analyzed the problem, applied independent subpackages, and verified the optimization effect in production.

1. Background

In the current environment, WeChat mini‑programs have become a key channel for activity operations. To meet the demand for high‑efficiency page releases on mini‑program, H5, and App platforms, many activity pages use a WebView‑embedded H5 approach. Tencent Classroom implements a common‑act page (the mini‑program page name) as a universal WebView container.

This page has hosted over 20 activity series such as "Buy One Get One", "Tang Bean Welfare Club" (later upgraded to kbone architecture), new‑user red packets, Spring Festival events, and March promotions on the WeChat mini‑program side.

Because most activities are online, the page load time is not obvious when users jump from the main site. However, for offline operations like the "Xin Xuan" activity, users scan a mini‑program code to launch the app, making the startup and loading time a critical issue that needs urgent optimization.

Analyzing the mini‑program startup process and noting that this WebView page has few dependencies on common methods and components, an independent subpackage approach was chosen. The activity page's independent subpackage reduced the main package size by 93% and overall user startup speed improved by 30%, with high‑end devices able to launch the common‑act page within 1 second.

2. Mini‑program activity page startup process analysis

2.1 How common‑act opens H5

As a universal page that carries H5, common‑act processes various input parameters, constructs the required URL, and injects user tickets into the web page via query parameters.

The whole opening process is serial: users first launch the mini‑program from the common‑act page; during the onLoad phase, the H5 link is generated and passed to the view layer's

webview

component. If the page parameters already contain the address (no need to fetch from the configuration platform), the total opening time equals the mini‑program startup duration plus the H5 loading duration.

2.2 Stages of common‑act startup

The startup can be roughly divided into two processes: loading the mini‑program and loading the H5.

Mini‑program loading refers to the time from the user clicking the mini‑program card/QR code/link to the onReady lifecycle of the first screen.

H5 loading refers to the time from navigationStart in the WebView to the first screen of the web page.

This article focuses on optimizing the “mini‑program loading” part.

2.3 WeChat mini‑program startup and load process

Mini‑program resource preparation

Code injection

Home page rendering

Resource preparation includes two stages: mini‑program environment preparation and code package preparation.

In the launch flow, developers can only optimize code package preparation, code injection, and home page rendering; other parts are not currently controllable.

3. Mini‑program activity page startup optimization方案

3.1 Current startup status

Data from the mini‑program management backend (first week of May, full‑package update) shows average startup times for all devices and low‑end devices.

3.2 Independent subpackage solution

Independent subpackages are a special type of subpackage that can run independently of the main package and other subpackages. When launching from an independent subpackage, the main package does not need to be synchronously prepared; it is only downloaded when the user later enters a normal subpackage or the main package, thus improving load speed.

Because an independent subpackage cannot depend on the main package or other subpackages, all required dependencies must be placed within the page folder. The involved dependencies include:

Basic npm packages: @tencent/imwxutils, @tencent/imlog-wx, simple-base-converter

Login related: login state check, obtain mini‑program ticket

Routing related: page navigation

Request related: keFetch (business‑side request wrapper)

<code>common-act/
├── common-act.css
├── common-act.json
├── common-act.ts
├── common-act.wxml
├── node_modules/...
├── package-lock.json
├── package.json
└── utils
    ├── const.ts
    ├── fn.ts
    ├── index.ts
    ├── performance.ts
    └── type.ts
</code>

After processing, the independent subpackage size is 134.92 KB, a 93% reduction compared with the main package.

3.3 Performance reporting scheme

Optimizing startup speed requires detailed launch data. The mini‑program performance API can return the following metrics:

Startup duration: emitted only on the launch page

Code injection duration: emitted when the main or subpackage is injected

First render duration: emitted when the first screen renders

Route duration: emitted on page navigation

Additional factors and data to report include system info (device model, base library), network type and signal strength, mini‑program version, page path, and parameters.

Log fields are:

project and message locate the performance data

cmd may be appLaunch, firstRender, route, evaluateScript

pathname identifies the page, e.g., pages/common-act/common-act

cost_time is the duration of the behavior

addition records startTime, device, WeChat version, base library version, network type, signal strength, and an isLaunch flag for launch records

platform contains the official version information for comparison

query holds page parameters for analysis

4. Effect analysis of independent subpackage

After a 50% gray release with data‑reporting capability, 38,660 valid records were collected (19,968 new version, 17,692 old version). Comparison shows:

Average startup reduced from 4008 ms to 2942 ms

Median reduced from 3231 ms to 2259 ms

Average deviation decreased, indicating more concentrated performance

Proportion of launches under 3000 ms increased from 44% to 70%

4.4 Impact of device type

High‑end iOS devices: average 1804 ms → 987 ms (45% improvement). Mid‑end iOS: 2712 ms → 1686 ms (38%). Low‑end iOS: 4440 ms → 3136 ms (29%). Android high‑end: 3335 ms → 2348 ms (30%). Android mid‑end: 4853 ms → 3945 ms (19%). Android low‑end: 7560 ms → 6298 ms (17%).

5. Optimization summary

Independent subpackage reduces common‑act startup time by ~30%, with median dropping from 3.2 s to 2.2 s; high‑end devices achieve sub‑second startup.

The proportion of users completing startup within 3 s rises from 44% to 70%, noticeably improving user experience.

Device performance is the main factor affecting startup speed; high‑end devices average under 1 s.

Developers can only influence code package preparation and injection; the underlying environment preparation depends on device and network, leaving limited optimization space.