---
title: 按需注入
summary: "介绍按需注入特性，通过配置 lazyCodeLoading 减少启动时代码注入量以优化启动时间和内存占用。"
questions:
  - 什么是按需注入，它解决了什么问题？
  - 按需注入需要什么基础库版本支持？
  - 如何在 app.json 中配置按需注入？
  - 启用按需注入后哪些代码不会被加载和初始化？
  - 按需注入对全局变量和共享 JS 模块有什么影响？
  - lazyCodeLoading 配置项的值应设置为什么？
  - 小程序启动时默认的代码注入行为是怎样的？
  - 启用按需注入后为什么建议移除未使用的自定义组件声明？
  - 按需注入如何降低小程序的启动时间和内存占用？
  - 使用按需注入时如何避免共享模块执行顺序带来的问题？
---

在涂鸦小程序启动的过程中，除了代码包下载以外，代码注入也是一个主要的耗时环节。注入代码量的大小与内存占用与注入耗时正相关。

利用「按需注入」的特性，可以优化代码注入环节的耗时和内存占用。

## 按需注入

> 基础库 2.29.0 开始支持， 低于 2.29.0 的版本无效果。

通常情况下，在小程序启动时，启动页面依赖的所有代码包（主包、分包、插件包、扩展库等）的所有 JS 代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，同时所有页面和自定义组件的 JS 代码会被立刻执行注册挂载（待实例化）。这造成很多没有使用的代码在小程序运行环境中注入执行，影响注入耗时和内存占用。

自基础库版本 2.29.0 起，小程序支持通过配置，有选择地注入必要的代码，以降低小程序的启动时间和运行时内存。

```json
{
  "lazyCodeLoading": "requiredComponents" // 按需注入的代码类型
}
```

> 通过配置 app.json 的 lazyCodeLoading 字段，可以配置按需注入的代码类型。

## 注意事项

- 启用按需注入后，小程序仅注入当前访问页面所需的自定义组件和页面代码。未访问的页面、当前页面未声明的自定义组件不会被加载和初始化，对应代码文件将不被执行。请开发者修改配置后务必确认小程序的表现正常。

会带来以下影响， 例如使用全局变量、全局对象、共享 JS 模块等，会受执行的先后顺序影响。

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

share.setValue(1);
Page({
  // 业务代码
})
```

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

share.setValue(2);
Page({
  // 业务代码
})
```

如果先执行 `pages/one/index.js`， 再执行 `pages/two/index.js`， 则 `share.setValue(2)` 会覆盖 `share.setValue(1)`， 最终 `share.getValue()` 的值为 2。
反之，如果先执行 `pages/two/index.js`， 再执行 `pages/one/index.js`， 则 `share.setValue(1)` 会覆盖 `share.setValue(2)`， 最终 `share.getValue()` 的值为 1。

此时业务开发应避免这种情况出现。

- 启用按需注入后，页面 JSON 配置中定义的所有组件和 `app.json` 中 `usingComponents` 配置的全局自定义组件，都会被视为页面的依赖并进行注入和加载。建议开发者**及时移除 JSON 中未使用自定义组件的声明**，并尽量**避免在全局声明使用率低的自定义组件**，否则可能会影响按需注入的效果。