Hello, big guys, I am the season of summer twenty months (changed his name, is nian nine oh), professional cut diagram son. 🦞

🌲 🌲 🌲preface:

A few days ago a friend just into the line for wechat asked me to submit small program code prompt is too big can not upload is what reason? How to solve it? Of course, subcontracting can solve almost all the submission size limitation problems of wechat mini program, but I still asked him to send me the prompt content. I see it is more than four or five hundred KB, with subcontracting that is not overqualified to use 🤣 let him compress the static resources to get it done, but after I think about subcontracting in addition to solving the problem of size there are any benefits? Is there any way to avoid exceeding the size limit?

🍀 🍀 🍀The body of the:

🔴 Current wechat applets size limit and why to limit the size:

1️ first, take a look at the relevant limitations on size of current wechat small programs: 1. No limit on the number of subcontracting; 2. 2. The size of all subcontracts shall not exceed 20m; 3. The size of a single packet cannot exceed 2 MB.

2️ so why micro channel small program to limit the size? Because miniprograms are designed to be disposable, lightweight applications. It is not recommended to design it as an app, so the size is limited in consideration of the startup speed and other aspects.

🟠 What can be done to avoid and resolve size limits:

With the above limitations in mind, we can try our best to avoid our small program size exceeding 2m(of course, that is the magnitude of the mall what I did not say 😂).

🃑1. Use a third-party library to load files as required

For example, in a projectechartsThere may be several ICONS that we use, so it’s not necessary to download echarts when installingCustomize it online at echartsYou can save more than a little bit of sizeEcharts online customizationLike some of the UI libraries we use, we import on demand if we can and import on demand if we can’t import on demand we switch to 😄

Here is a recommended set of UI libraries commonly used by wechat applets

1.Official WeUI component library

2.ColorUI



3.Vant Weapp UI



4.iView UI



5.TaroUI



Shit, how do I resize this picture

🃒2. Compress static files such as images

A lot of pictures will definitely be used in the project. Under normal circumstances, the design will give us a double or triple image for us to display different multiples according to different resolutions. In fact, the rough method we can use any resolution of the triple image (not recommended), and then the image lossless compression, generally can reduce the size of the image by 70%. Here a picture compression address picture compression is recommended

🃃3. Static resource cloud services

Reduce the size of static resources in packaged files, put static files used in projects on OSS, use CDN acceleration and reduce code size. If you want to get their own cloud server put static resources, suggest pulling seven cattle cloud wool. 😂 register a seven cattle cloud account -> find all products in the object storage -> upload pictures -> copy link ⚠️ note: sometimes access is not the need to configure anti-theft chain, specific how to configure big guys their own Baidu. 😄

🃔4. Use of subcontracting

🔍 to get to our orthodox approach to size limitation, take a look at the question raised at the beginning of the article: what are the benefits of subcontracting other than solving the size problem? To answer this question, let’s take a look at how subcontracting actually works: When the applet starts, the main package is downloaded by default and the main package page is launched. When the user enters a page in the subpackage, the client will download the corresponding subpackage, and then display it. The above questions are easily answered: 🔔🔔 Subcontracting of applets optimizes the download time for the first startup of applets, as well as better decoupling collaboration when multiple teams work together.

❓ : The following lists the ways we commonly use for subcontracting: native, UniAPP and taro. In addition to the configuration file name is different, the code is the same, the key is the project directory and subpackages field. 🖊 native:

// Declare the project subpackage structure in the app.json subpackages field
{
  "pages": [the main package"pages/index"."pages/logs"]."subpackages": [subcontract {"root": "packageA"."pages": [
        "pages/cat", relative to the root subcontracted path"pages/dog"] {},"root": "packageB"."name": "pack2"."pages": [
        "pages/apple"."pages/banana"] {},root: Subcontract root directoryname: Subcontracting alias, which can be used when subcontracting pre-downloadpages: An array of subcontracted page paths, as opposed to the subcontracted root directoryindependent:true|falseWhether subcontracting is independent subcontracting}]}Copy the code

🖊 uniapp:

// Declare the project subpackages structure in the pages. Json subpackages fieldThe code remains the same, but the key is the Subpackages fieldCopy the code

🖊 taro:

// In the SRC directory app.jsxThe code remains the same, but the key is the Subpackages fieldCopy the code

💐 💐 💐conclusion:

Wechat small program subcontracting is actually a very simple operation, but there is a subcontracting asynchronization, pre-download, independent subcontracting and other knowledge or you need to use their own research 📕. Finally, I participated in this annual popularity list some time ago. In fact, I also know that this list is not representative of anything, but the final result of ranking 54 still makes me a little vain. I think the meaning of this symbol for myself is to urge me to output higher quality articles in the New Year, so that I really deserve this title, you guys, we cheer together. Finally, I wish you study and progress, a successful career! 🎆 🎆 🎆