WeChat Mini Program Integration and Size Optimization: Engineering Practices and Packaging Tools

1 Engineering Specification

To save development time, existing mini‑program code from each business line was copied into separate directories and common logic was extracted into a common module, enabling code reuse and easier size accounting.

1.1 Directory Structure

The project follows this layout:

.
├── common   # common modules / shared business logic
├── home     # homepage
├── flight   # flight tickets
├── train    # train tickets
├── bus      # bus tickets
├── hotel    # hotel booking
└── ticket   # event tickets

1.2 Common Components and APIs

We use template for reusable pages and components such as city location and calendar, each only 20‑30KB, saving hundreds of kilobytes compared with duplicating them per business line. Shared APIs include Watcher , Requester , Loading , and Navigation , which dramatically reduce the final size.

2 Packaging and Compression Tools

2.1 WeChat Developer Tools

The built‑in "code compression upload" feature only minifies JavaScript with Uglify and does not touch WXML, WXSS, or unused resources.

2.1.1 Mini‑Program Build Process

All JavaScript files are wrapped with a custom AMD‑like loader:

define("some.js", function(require, module) {
  // original code
});

WXML is compiled to createElement calls and WXSS is transformed into JavaScript‑injected CSS.

2.1.2 Useful Tricks

On macOS, reveal the developer tools package at /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/ and format the bundled JavaScript with js-beautify for inspection.

When logging, use global.contentWindow.console.log instead of console.log to see output in the WebKit console.

2.2 JavaScript Compression

We merge all app.js and page.js entry files into a single bundle.js using an AST‑based tool that rewrites page registration:

global.YPage(pageName, pageIndex)(pageOpt)

The tool replaces each page.js with a call to global['p' + index]() , then bundles everything with Webpack, finally changing app.js to require('./bundle.js') .

2.3 Compressing WXML, WXSS, JSON

2.3.1 WXML

Remove comments with / /gm

Strip newlines with /"\n\s*/g

2.3.2 WXSS

Use uglifycss to minify.

2.3.3 JSON

Minify via JSON.stringify(JSON.parse(...)) .

2.4 Deleting Unused Files

After packaging, many empty directories and files that are not imported can be removed, reducing both size and load time.

2.4.1 Unused JavaScript

Only page.js and the final bundle.js need to remain; other JS files can be deleted.

2.4.2 Unused WXML

By parsing the route list and using xmldom , we identify and delete WXML files not referenced by any import.

2.4.3 Unused WXSS

Similarly, we parse @import statements with a regex to find and remove unused WXSS files.

2.5 Code‑Level Optimizations

Avoid ES6 features that require runtime polyfills, such as import and class .

Use Iconfont for icons.

Other size‑saving coding practices.

3 Final Result

After aggressive packaging and design reuse, the combined bundle for seven business lines stays around 1.3 MB, leaving roughly 730 KB of free space under the current 2 MB limit.

4 Conclusion

The engineering approach of extracting common logic, enforcing a unified structure, and applying targeted packaging and compression tools can significantly reduce WeChat mini‑program size and is useful for anyone facing similar constraints.