What else can be done besides subcontracting if the size of the mini program exceeds the limit? How to avoid and solve size limitations?

What else can be done besides subcontracting if the size of the mini program exceeds the limit? Is there any way to avoid exceeding the size limit? The following article will introduce to you how to avoid and solve size restrictions. I hope it will be helpful to you!

A few days ago, a friend who just joined the industry asked me on WeChat why the code prompt when submitting a small program was too large and could not be uploaded? How to deal with it?
Of course subcontracting can solve almost all submission size limitations of WeChat mini programs, but I still asked him to send me the prompt content. I saw that it exceeded four to five hundred kb. If subcontracting is not overkill, just let him compress the static resources and it will be done. But later I thought about subcontracting, besides solving the problem of size, what other benefits does subcontracting have? Is there any way to avoid exceeding the size limit?

Text：

The current size limit of WeChat applet and why the size should be limited:

1️⃣Read it first Let’s take a look at the current size restrictions on WeChat mini programs:
  1. There is no limit on the number of subcontracts;
  2. The size of all subcontracts cannot exceed 20m;
  3. The size of a single package cannot exceed 2m. ；

2️⃣So why do WeChat mini programs have size restrictions?
The original intention of the design of the applet is to go after use, lightweight application. It is not recommended to design it as an app, so the size is limited in consideration of startup speed and other aspects.

What are the ways to avoid and solve the size limit:

Knowing the above related restrictions, then we can try to avoid the size of our small program exceeding the limit during the development process. 2m (of course it’s the kind of shopping mall that’s very big, so I didn’t mention it)

1. Use third-party libraries to load as much as possible

For example, if you use echarts in a project, we may usually use several icons, so there is no need to download all echarts during installation. You can directly customize it online on the echarts official website. It can save more than one and a half points in size (echarts China map has problems and is not recommended). Similar to some UI libraries we use, if it can be imported on demand, it can be imported on demand. If it cannot be imported on demand, we will change it.

Here we recommend some commonly used UI library collections for WeChat mini programs

1. Official WeUI component library

https://developers.weixin.qq. com/miniprogram/dev/extended/weui/

2、ColorUI

https://github.com/weilanwl/ ColorUI

3、Vant Weapp UI

https://youzan.github.io/vant-weapp/#/intro

4、iView UI

https://weapp.iviewui.com/docs/guide/start

5、TaroUI

https://taro-ui.jd.com/#/docs/introduction

How to adjust the image size

2. Compress images and other static files

A lot of pictures will definitely be used in the project. Usually, the design will give us two times the picture and three times the picture for a picture, allowing us to display different times the picture according to different resolutions. In fact, as a crude method, we can use triple the image regardless of the resolution (not recommended), and then compress the image losslessly, which can generally reduce the size of the image by 70%.
Recommend an image compression address here (https://tinypng.com/)

3. Static resource cloud service

Reduce The static resources occupy the space in the packaged files. You can also put the static files used in the project on OSS. You can use CDN to accelerate and reduce the code size. If you want to make your own cloud server to store static resources, it is recommended to use Qiniu Cloud.
Register a Qiniu Cloud account->Find the object storage in all products->Upload pictures->Copy link
⚠️Note: Sometimes you need to configure anti-leeching if you cannot access it. How to configure it? We use Baidu on our own.

4. Use subcontracting

Coming to our orthodox method of solving size restrictions, let’s first look at the question raised at the beginning of the article: In addition to subcontracting What are the benefits of being able to solve the problem of size? To answer this question, first understand how subpackaging works: When the mini program is started, the main package will be downloaded by default and the page in the main package will be launched. When the user enters a page in the subpackage , the client will download the corresponding subpackage and display it after the download is completed.

Then the above question is easy to answer: subcontracting the mini program can optimize the download time for the first startup of the mini program, and can better decouple collaboration when multiple teams develop together.

So what should we do if we want to subcontract? : The following lists the commonly used subcontracting methods of native, uniapp, and taro. The three development methods for subcontracting except that the names of configuration files are different, the codes are the same. The key is the project directory andsubpackagesField.

Native：

// 在app.json的subpackages字段声明项目分包结构
{
  "pages":[			主包
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [	分包	
    {
      "root": "packageA",	
      "pages": [
        "pages/cat",	相对于root分包的路径
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    },
    {
        root:分包根目录
        name:分包别名,分包预下载时可以使用
        pages:分包页面路径数组,相对与分包根目录
        independent:true|false分包是否是独立分包
    }
  ]
}

uniapp：

// 在pages.json的subpackages字段声明项目分包结构
代码同原生，关键就是subpackages字段

taro：

// 在src目录下app.jsx中进行配置
代码同原生，关键就是subpackages字段

Conclusion：

WeChat applet subcontracting is actually a very simple operation, but there is also asynchronous subcontracting ization, pre-downloading, independent subcontracting and other knowledge still need to be studied by the bosses when they use it again.

Finally, I participated in this annual popularity ranking some time ago. In fact, I also know that this list does not represent anything, but the final result of ranking 54 still made me feel vain. I think the meaning of this logo to me is to urge me to output higher-quality articles in the new year, so that I can really deserve this title. Let’s work hard together, everyone.

Finally, I wish you all great progress in your studies and success in your career!

[Related learning recommendations: 小program development tutorial]

The above is the detailed content of What else can be done besides subcontracting if the size of the mini program exceeds the limit? How to avoid and solve size limitations?. For more information, please follow other related articles on the PHP Chinese website!