Home > WeChat Applet > Mini Program Development > Introduction to methods for mini program main package size optimization

Introduction to methods for mini program main package size optimization

不言
Release: 2018-12-14 10:47:23
forward
3533 people have browsed it

The content of this article is an introduction to the method of optimizing the main package size of the mini program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Currently there are the following restrictions on the development size of mini programs:

  • The size of all sub-packages of the entire mini program does not exceed 8M

  • The size of a single sub-package/main package cannot exceed 2M

In the continuous iteration, the code can easily exceed the limit and fail to be uploaded, so the overall structure of the project has been optimized recently. , to summarize the following

1, use sub-packaging

Official document address
The main package only places the TabBar page, and the other pages are placed in the sub-packaging directory, you can Establish subcontracting folders according to the corresponding business

├── pages                                 // 主包文件夹
│   ├── xxx1                              // xxx1 tarbar页面
│   ├── xxx2                              // xxx2 tarbar页面
│   ├── xxx3                              // xxx3 tarbar页面
│   └── xxx4                              // xxx4 tarbar页面
├── subPackages                           // 分包文件夹
│   ├── xxx                               // xxx 相关业务代码
│   ├── xxx                               // xxx 相关业务代码
│   ├── xxx                               // xxx 相关业务代码
│   ├── xxx                               // xxx 相关业务代码
│   └── xxx                               // xxx 相关业务代码
├── service                               // 服务层相关业务代码
├── .gitignore                            // git 忽略项
├── app.js              
├── app.json               
└── README.md                             // 说明文档
Copy after login

2, Image resource processing

For images that do not change frequently, you can use a CDN server, and then reference the CDN link in the mini program, such as the mini program The logo, home page background image, and loading no data prompt image can all be placed on the CDN server.

3, clean up unused code and resources in a timely manner

Quoting an official quote

During daily development, we may introduce some new library files , and after a period of time, this library is no longer used due to various reasons. We often just remove the references in the code and forget to delete such library files. At present, mini program packaging will put all the files under the project into the code package. In other words, these library files and resources that are not actually used will also be put into the code package, thus affecting the overall code package. size.

4, resource files should be placed in the appropriate location

According to the packaging principle of the mini program: directories outside the subpackages configuration path will be packaged into the app (main package), so some of the quoted The UI library, js plug-in, and font library will all be packaged into the main package, so the main package will become larger and larger. Therefore, if a third-party UI component or third-party plug-in is only needed for a certain page, try to put it in the subcontract directory where the page is located. After all, the main package only has 2M of space, and the subcontracts together can have 8M of space.

The above is the detailed content of Introduction to methods for mini program main package size optimization. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template