Small program: uniapp solves the problem that vendor.js is too large

1. Environmental introduction

uniapp + HBuilderX

2. Problem description

Debugging on the real machine, it prompts that the package submission is too large, and the QR code cannot be generated, and it is even impossible to upload the code later

3. Code package size optimization

Code Package Size Optimization | WeChat Open Documentation

3.1. Static resources such as pictures are placed on the server, and the applet refers to the file address of the server (if there are many pictures, it will save a lot of volume).
The project only retains the icon of the bottom navigation.

3.2. Subcontract processing according to business type (the volume of a single package decreases rapidly after subcontracting):

Using Subpackage | WeChat Open Documentation

"optimization":{
    "subPackages":true
}

3.3. Compress code at runtime (the volume is reduced a lot, and the test project is reduced by more than 400 kb)

 

Before compression:

 After these steps, the code volume has reached:

Less than 2M, the code can already generate a QR code to preview, debug, and upload 

3.4. Check these items:

3.5. After checking, it is passed here:

manifest.json configures on-demand injection:

"lazyCodeLoading": "requiredComponents"

After configuration passed here 

 

3.6. The important point is to clean up useless code in time 

3.7. After packaging the code, when uploading, it prompts that the size of the code exceeds the limit. At this time, close the WeChat development tool, reopen it, and upload it. The upload is successful. There have been many similar situations later.

4. Welcome to exchange and correct, pay attention to me, and learn together 

5. Reference link:

Solve the problem that vendor.js is too large

Vue packaging optimization solution (to solve the problem of too large vendor.js)_Huanghe Ailang's Blog-CSDN Blog_vendor.js

Vue packaging optimization solution (to solve the problem of too large vendor.js)_Huanghe Ailang's Blog-CSDN Blog_vendor.js

https://www.jb51.net/article/164542.htm

uni-app project vendor.js too large processing method - Brief Book

How to subcontract the uniapp applet? Complete and detailed steps to teach you_Mu Qing゚'s blog-CSDN blog_uniapp subcontracting

Solve the problem that the vendor.js file is too large after compiling uni-app

How to solve the problem that the vendor.js file is too large after compiling uni-app / Zhang Shengrong

Mini Program Performance Optimization Guide | WeChat Open Community

uniapp applet enables on-demand injection of components "lazyCodeLoading": "requiredComponents"_One Jin Code Blog-CSDN Blog

On-demand injection and time-consuming injection | WeChat Open Documentation

Guess you like

Origin blog.csdn.net/snowball_li/article/details/125440987