---
title: On-Demand Injection
---

During the start-up of a Tuya mini-program, besides the downloading of code packages, code injection is also a major time-consuming step. The size of injected code is directly proportional to memory usage and injection time.

By utilizing the "on-demand injection" feature, you can optimize the time and memory used during the code injection process.

## On-Demand Injection

> Supported starting from Basic Library version 2.29.0. Versions below 2.29.0 will not have this effect.

Typically, when a mini-program starts, all JavaScript code from the packages needed by the launch page (main package, sub-packages, plugin packages, extension libraries, etc.) are merged and injected. This includes code for other unvisited pages and unused custom components, with all page and custom component JavaScript code immediately executed for registration and mounting (awaiting instantiation). This results in many unused scripts being injected and executed in the mini-program runtime environment, impacting injection time and memory usage.

Starting from Basic Library version 2.29.0, mini-programs support selective code injection to reduce start-up time and runtime memory usage.

```json
{
  "lazyCodeLoading": "requiredComponents" // Type of code for on-demand injection
}
```

> You can configure the type of code injection using the `lazyCodeLoading` field in app.json.

## Important Considerations

- With on-demand injection enabled, the mini-program only injects the code for custom components and pages required by the currently accessed page. Unvisited pages and custom components not declared on the current page will not be loaded and initialized, and their corresponding code files will not be executed. Developers must ensure that the mini-program functions normally after changing this configuration.

This can impact cases using global variables, global objects, shared JavaScript modules, etc., where execution order affects outcomes.

```js
// pages/one/index.js
import { share } from '@/utils/share';

share.setValue(1);
Page({
  // Business logic
});
```

```js
// pages/two/index.js
import { share } from '@/utils/share';

share.setValue(2);
Page({
  // Business logic
});
```

If `pages/one/index.js` executes before `pages/two/index.js`, `share.setValue(2)` will override `share.setValue(1)`, resulting in the final value from `share.getValue()` being 2. Conversely, if `pages/two/index.js` executes first, `share.setValue(1)` will override `share.setValue(2)`, resulting in the final value being 1. Developers should avoid such scenarios.

- With on-demand injection enabled, all components defined in the page JSON configuration and all global custom components configured in `usingComponents` within `app.json` are considered dependencies of the page and will be injected and loaded. Developers are advised to **promptly remove declarations of unused custom components from JSON configurations** and to **avoid globally declaring custom components with low usage**, as this can affect the effectiveness of on-demand injection.