When subcontracting, first of all we have to understand what is subcontracting, what is the meaning of subcontracting? In my work, I have been exposed to three types of subcontracting, and of course the concept of subcontracting varies from situation to situation.

One: packet subcontracting

I encountered packet subcontracting when I was making a small program for the requirement of Bluetooth unlocking. The front end communicates directly with the hardware engineer. A protocol is usually not one or two characters, but 100-200 characters is quite normal. Because data transfer is larger than 20 bytes will lose the packet, all need to subcontract.

For specific subcontracting details, you can refer to my article, which has a detailed introduction. Small program Bluetooth unlock, how is the front end directly and hardware data interaction?

Code splitting for Webpack.

Code splitting is something I use when I do front-end performance optimization. Code splitting is called code splitting, which is also called subcontracting by many people. When our project was relatively large, the volume of packaged app.js was relatively large, and the loading time of the first screen was too long, which greatly affected the user experience.

How do I do code Splitting?

There are two main methods: ① Route lazy loading ② Service separation from third-party library (vendor)

For details, you can go to my article. Front-end performance optimization, how to improve the first screen loading speed?

Iii. Micro-program subcontracting of wechat

Wechat small program subcontracting is our topic today. Sometimes our small program is too big, and it will be slow to open the small program for the first time. At this time, we can try subcontracting. Subcontracting allows users to download resources as needed while operating the mini program (users download the corresponding resources when entering certain pages, which can speed up the mini program and optimize the user experience). .

Currently, the subcontracting size of small program has the following limitations:

  • The whole small program all subcontracting size is not more than 20M
  • The size of a single subcontract/main package cannot exceed 2M

1. Trivia: I put two larger images into the project and packed them.

When we upload the code, we will notice that the subcontract size exceeds the limit.

If we click to see the list of files, we’ll see that our last two images are already over 1M. Add in our other business code, and it’s over 2M.

This is because the micro channel small program code has a 2M limit, so sometimes put pictures have to endure point, dare not put too big in the small program, can only put remote; But as the project iterated over and over, with more and more code images, the development became more careful. Is not very uncomfortable, can also let me comfortable knocking code.

  • The size of each subcontract of wechat applets is 2M, and the total volume cannot exceed 20M.
  • The size of each subcontract of Baidu small program is 2M, and the total volume cannot exceed 8M.
  • The size of each subcontract of Alipay mini program is 2M, and the total volume cannot exceed 8M.
  • The size of each subcontract of QQ mini program is 2M, and the total volume cannot exceed 24M.
  • The size of each subpackage of byte applets is 2M, and the total volume cannot exceed 16M (the byte applets foundation library 1.88.0 or later supports it, and the byte applets developer tool should use a version greater than 2.0.6 and smaller than 3.0.0).

In order to simulate that the code was too large and had to be subcontracted, I deliberately copied over 40 files and configured them in pages configured in pages.json to simulate the case where the project business code was too large.

When we package and upload, we will find the same prompt: the size of the package exceeds the limit. Check the list to find the business code we just simulated.

Due to the size and resource loading limitations of applets, various applets platforms provide a subcontracting approach (in this case uni-App technology) to optimize the download and startup speed of applets.

The main package, which places the default startup page /TabBar page, and some common resource /JS scripts for all the subpackages; Subcontracting is divided according to the configuration of pages. Json.

When the small program starts, the main package will be downloaded and the page in the main package will be started by default. When the user enters a page in the subpackage, the corresponding subpackage will be automatically downloaded and displayed after downloading. A waiting message is displayed on the terminal.

So next, we need to subcontract the business code.

Pages should not be in subPackages[x] if you subpackage the files you want to subpackage

So we need to put the folder in the same directory as Pages and adjust the import path accordingly.

Again package upload, will still be prompted to limit. Look at the list, which is the path just overwritten, indicating that we overwritten the path successfully.

After successful rewriting, formal subcontracting began.

You need to copy the business code in the page. Json file under subPackages and use relative paths.

Let’s take a look at the packaged app.js

After the subcontracting was completed, we packed and uploaded again, and found that the upload was successful.

Log in to our admin background and take a peek. Perfect!

Conclusion: It is not difficult to subcontract wechat small programs. It should be noted that the size of each subcontract of wechat small programs is 2M, and the total volume cannot exceed 20M. If you want to subcontract, you need to subcontract the module at the level of Pages, not at the level of pages, and after that, the entire module must be subcontracted. Do not subcontract some of the same module, or wechat will report an error. Common modules, such as the home page, common module methods, and base components, must be placed in the main package to ensure the existence of common modules when loading subpackages. The final package and upload is app.js, in which you can see the actual situation of our subcontracting.

That’s all. Thank you.

Previous good articles of the author:

Front-end performance optimization, how to improve the first screen loading speed?

Front-end technology is changing fast, the era of VUE3.0 has arrived…

The five core concepts of Vuex are enough after reading this article