Skip to main content

Mini Program Size Analysis and Optimization

WeChat Mini Program currently has limitations on the main package size. Exceeding 2M will prevent the Mini Program from being uploaded and published normally. When the package size exceeds the limit and cannot be published, consider using subpackages or reducing code. In WeDa, there are efficient ways to resolve the issue where the main package size exceeds the limit and causes the application to fail to publish:

  • Enable "Asynchronous Loading of Component Libraries for Mini Programs" in the application settings, which places WeDa runtime content in subpackages for asynchronous loading. The trade-off is an increased first-screen loading time for the Mini Program.
  • Use sub-applications to implement mini program subpackages, placing some page logic in sub-applications.

If you do not wish to address the Mini Program size issue through any subpackage implementation, you need to analyze the main package size of the Mini Program:

01. Use WeChat Developer Tools to Preview WeDa Applications​

First, refer to the WeChat Developer Tools Preview documentation to open the application developed with WeDa in WeChat Developer Tools.

02. Static Code Dependency Analysis​

WeChat Developer Tools provides a static code dependency analysis plugin, enabling developers to view the file composition and dependencies of the code package, thereby optimizing its size and content.

Enable the Static Code Dependency Analysis Plugin​

Developers can access the plugin through two entry points: 1. Top Navigation Bar in the Directory Tree 2. Project Settings - Local Code - Code Dependency Analysis

Entry Point

View Code Package Composition​

After starting the analysis plugin, you can view by default the file composition within the project, the corresponding code size, and the size of unused code files (i.e., those without dependencies).

Code Package Composition

View Code Dependencies​

Click on any file (excluding those without dependencies) to view its dependency graph. Right-click to quickly open the corresponding file for code editing.

Code Dependencies

View Unreferenced Files​

Developers can view the status of unreferenced files in the current project by switching filter conditions (selecting 'Unreferenced Files') or using the shortcut entry, and optimize the code files based on their specific needs.

Unreferenced Files

03. Optimize Code Size​

Based on the analysis results from Step 02, we can ignore unreferenced files since they will be excluded by the IDE during packaging, and focus on referenced files.

The main optimization methods include

  1. Delete unused pages in the WeDa application editor.
  2. Delete unused components in the WeDa application editor. If components are not used, they will not be packaged into the Mini Program.
  3. Delete unused code in the WeDa application editor, such as CSS/JS, etc.
  4. Avoid excessive page or component nodes, such as duplicating multiple component nodes. It is recommended to use more efficient implementation methods and maximize the reuse of components and pages.
  5. Avoid writing duplicate code logic. If there are many similar code logics in the application, consider abstracting these logics into global or page-level methods and reference these methods at each usage point.
  6. Pages with large file sizes (such as chart components) can be transferred to independent web applications and embedded into the Mini Program using the Web Embedding Component.