Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "transferring Mini Program subcontract loading case analysis". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

It looks like a beautiful design, but there are two problems:

The first time to open Mini Program when the white screen is very long, because you have to download nearly 2.5m code, that is, the more your code, the longer the white screen, while the transfer to APP uses the web page offline mechanism experience is better: when the user opens APP to download / update the offline package, so that when the user enters the corresponding web page, the code has been downloaded, there is no long white screen process.

When there is a partial update of the code, there is no way to make an incremental update, so that after each release, users need to download all the code again.

The problem seems small, but it has a great impact on transfer. For example, when Wechat advertisements are launched, the user's wastage rate between clicking on the ad and loading the first page can reach 40%, which is obviously a performance unacceptable to FE, and the Mini Program subcontract loading mechanism can solve the above problems to some extent.

The subpackage loading mechanism of Mini Program is actually a combination of offline package and M page, that is, you can divide the code into main package + N subpackages, the official definition:

When Mini Program starts, it downloads the main package and launches the page within the main package by default. If the user needs to open a page within the subpackage, the client will download the corresponding subpackage and display it after the download is completed.

The summary is as follows:

Open Mini Program. By default, load the main package first.

When you enter the subcontract page, load the corresponding subpackage

The advantage is that when you enter the main package page, the amount of code you need to download is much smaller, the white screen time is shorter, and the experience is better.

Characteristics

1.7.3 and above are supported by basic libraries, and the whole package is used by default for unsupported versions.

The size of all subcontracts of the whole Mini Program cannot exceed 4m, and the size of a single subcontract / main package cannot exceed 2m.

At present, there is no limit on the number of subcontracts, that is, you can put N subcontracts, or even one per page.

The entry page / Tab page must be in the main package

About the main package

Enter Mini Program for the first time and download the main package code by default

All code outside the subcontract will be entered into the main package

The code in the subpackage can refer to the code in the main package.

About subcontracting

Because of the resource dependence, Wechat's mechanism is to download the main package first and then the subpackage.

The subcontract directory cannot be under the main package directory

A subpackage can refer to resources in its own package or in the main package, but not in other subpackages.

Pit

Mini Program's packaging mechanism is only packaged according to the file directory. Any require/import files in the subpackage will not be subcontracted as long as they are not in the same directory. That is to say, the class library and some public files can only be placed in the main package. If the main package is not well divided, it will be difficult to reduce the size of the main package.

When Android enters the subcontracting page, an ugly system-level loading layer appears, which affects the Android experience to some extent.

Before using the subpackage, the amount of compressed code of Mini Program is about 2.45m, that is to say, every new user needs the 2.45m code downloaded for the first time to enter the page. After using the subcontracting mechanism, the size of the main package is reduced to about 1m, that is to say, if you enter the main package page, the download time is reduced by about 60%.

File structure:

├── libs ├── components ├── pages main package root directory ├──── index homepage ├──── post publishing page ├────... ├── subPages subpackage root directory ├──── trade transaction subpackage ├──── mine my page subpackage ├────. The copy code is divided into about 20 subcontracts according to the track accessed by the user. For example, trade package, which contains details page, order page, payment page, payment success page, etc., the page of this line, users may not need to enter Mini Program to use, but once used may use the entire chain, so it can be used as a subcontract.

History entry is compatible. After a page is subcontracted, the path changes, for example, the details page changes from / pages/detail to / subPages/trade/detail, which means that if users visit the previous page and cannot get the correct page response (for example, shared Mini Program cards, QR codes, official account push messages, etc.), what about these static and immutable history entries? At present, we adopt the following scheme:

Every page in the original main package is retained, but the code only retains the jump logic. As soon as the user enters, he jumps to the corresponding subcontract page, which is almost imperceptible to the user.

This will also give rise to a small problem: these jump pages also take up a certain amount of space, and then we will optimize them to judge when onLaunch and the page jump, and jump directly to the correct subcontracted page.

This is the end of the content of "transfer Mini Program subcontract loading case Analysis". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.