How to Optimize WeChat Mini Program Performance: Data, Components, and SASS Tips

You and a camel are crossing a desert; each line of code adds weight, so unnecessary data can slow or even stop the journey.

Mini‑programs have strict package size limits: a single main or sub‑package cannot exceed 2 MB, and the total package must stay under 12 MB.

Necessary Interaction Principles

Mini‑program pages provide a data object; updating it directly affects the WXML view. Developers familiar with Vue or React will recognize the pattern, but in mini‑programs you must use setData to trigger updates.

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // doSomething
  }
});

The view layer uses WebView, while the logic layer runs in an isolated JavaScriptCore. Data transfer between them occurs via evaluateJavascript , converting data to a string and executing a script, which means large data transfers are slow and not real‑time.

Be Careful Setting data

The data object works like Vue’s reactive data, requiring Object.defineProperty or Proxy. Storing large, unused objects in data wastes memory and slows rendering.

Principle: Only place variables needed by WXML in the data object.

Two alternatives for other variables:

Define them outside the Page/Component instance.

let name = "is file scope data";
Page({});

Define them inside the instance but outside data, avoiding reactivity.

a) For a Page, add a customData field:

Page({
  data: { name: "reactivity data" },
  customData: { name: 'not reactivity data' }
});

b) For a Component, use pureData pattern:

Component({
  options: { pureDataPattern: /^_/ },
  data: { name: "is reactivity", _name: "is pureData" }
});

Experiments show that moving large, complex data out of data noticeably improves performance.

Think Twice About Component Communication

Communication methods in mini‑programs:

Child → Parent: triggerEvent Parent → Child: props Parent → Child: selectComponent Publish‑Subscribe: emit / on 1. triggerEvent – child calls this.triggerEvent, parent binds a handler.

2. props – parent places data in its reactive data, child receives it via props. Not ideal for large data objects.

3. selectComponent – parent obtains the child instance and calls its methods directly:

// child component
Component({
  methods: { updateStatus() {} }
});

// parent component
this.selectComponent("#childComponent").updateStatus();

Use selectComponent for large data transfers; props fits typical data flow.

4. $emit – publish‑subscribe breaks component coupling. Register with on('key', callback) and publish with emit('key', data). Be aware of global scope, proper key naming, instance filtering, and removal of listeners.

Friendly Use of SASS

Typical SASS nesting can produce deeply nested CSS classes, inflating bundle size. In large mini‑programs, limit nesting to two levels (maximum three).

<view class="recommend">
  <view class="recommend_header">
    <view class="recommend_header_author">
      <view class="recommend_header_author_img"></view>
      <view class="recommend_header_author_info">
        <view class="recommend_header_author_info_name"></view>
      </view>
    </view>
    <view class="recommend_follow"></view>
  </view>
  <view class="recommend_footer"></view>
</view>

.recommend {
  &_header {
    &_author {
      &_img {}
      &_info { &_name {} }
    }
  }
}

After compilation, many repetitive class selectors appear, increasing file size. Keeping the hierarchy shallow reduces duplication and improves load speed.

In pages with many modules, this reduction in WXML and CSS size is significant.

template & @import

When multiple pages share the same structure, use <template> instead of extracting a full component. Example:

<template name="liveItem"></template>
<template is="liveItem" data="{{list:preLiveList}}" />
<template is="liveItem" data="{{list:liveList}}" />

Common CSS can be imported with @import:

@import "../../common/common.wxss";

Understanding SPA in a Multi‑Page Application

Mini‑program pages coexist; navigating from Page A to Page B hides A but keeps it alive. Therefore, you should:

Stop unnecessary data updates when a page is hidden.

Clear timers in onHide and restart them in onShow.

Release unused resources to avoid memory leaks.

Third‑Party Libraries

Use third‑party libraries sparingly. Prefer writing small utilities yourself unless the library offers tree‑shaking and a clear size benefit.

If a third‑party component supports effective tree‑shaking, it may be acceptable.

Treat the Main Package Kindly

The main package is downloaded first, so keep it lightweight. Place a module in the main package only if:

The main package already references it.

Three or more sub‑packages need the same module.

Otherwise, let each sub‑package download its own copy, possibly using NPM to manage shared modules.