How to Cut Duplicate Loading in Mini‑Program Order Details with Preload‑JS

Background

In the Huolala mini‑program, clicking an order in the list opens a detail page that is a sub‑package, causing two loading phases: the sub‑package load and the API request. Static resources take 200‑600 ms, while the API averages 800 ms, so pre‑fetching the detail API on click can save one request round‑trip.

How to implement?

The first idea is to store the data in a global state.

List page code:

navigateToOrderDetail({ order_uuid });
// pre‑fetch while navigating
const orderDetail = await getOrderDetail({ order_uuid });
store.commit('setOrderDetail', orderDetail);

In the detail page replace the original request with a read from the store:

// const orderDetail = await getOrderDetail({ order_uuid })
const orderDetail = store.state.orderDetail;

Testing revealed two problems: the store may be empty when the API has not finished, and direct entry to the detail page bypasses the store.

Goal

Define four small goals and implement them with two wrapper functions preload and usePreload that share a cache keyed by a string.

// utils/preload.js
const preloadMap = {};

export function preload(key, request) {
  preloadMap[key] = request();
}

export function usePreload(key, request) {
  const cache = preloadMap[key];
  if (cache) {
    preloadMap[key] = null;
    return cache;
  }
  return request();
}

Usage example:

import { preload, usePreload } from '@/utils/preload';

navigateToOrderDetail({ order_uuid });
preload('orderDetail', () => getOrderDetail({ order_uuid }));

const orderDetail = await usePreload('orderDetail', () => getOrderDetail({ order_uuid }));

The implementation relies on the fact that all API calls return a Promise. By returning the same promise from preload and usePreload, the page can display a loading state while the request is pending, and the request time is reduced to 800 ms – page load time. If the promise is already fulfilled, the data is read instantly.

Further goals

Cache should be kept when the request parameters do not change.

Provide a way to force refresh when needed.

Handle failed requests by clearing the cache.

Validate that the supplied request returns a Promise.

To support these, the cache structure is extended to store the request’s dependencies and the request is wrapped with Promise.resolve:

// utils/preload.js (extended)
const preloadMap = {};

export function preload(key, request, deps) {
  preloadMap[key] = {
    promise: Promise.resolve(request()),
    deps,
  };
}

export function usePreload(key, request, deps) {
  const cache = preloadMap[key];
  if (cache) {
    const isDepsSame = deps.every((item, i) => Object.is(item, cache.deps[i]));
    if (isDepsSame) {
      return cache.promise;
    }
    preloadMap[key] = null;
    return cache;
  }
  return request();
}

Additional utilities such as useDep, setConfig, and removeOnCatch allow forced refresh and automatic cache removal on promise rejection.

@huolala-tech/preload-js

The library is published as npm i @huolala-tech/preload-js. Typical usage:

import { preload } from '@huolala-tech/preload-js';
preload('pageBData', pageBRequest);
navigateTo('pageB');
const data = await usePreload('pageBData', pageBRequest);

Features include pre‑request, caching with dependency tracking, forced refresh via useDep, and automatic cache clearing on Promise.catch.

New goals

Consider persisting the cache to local storage so that pages can render previously fetched data even when offline.

For the full source code see the GitHub repository HuolalaTech/preload-js .