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

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

按需注入

基础库 3.70.x 及以上版本支持，3.70.x 以下兼容但无优化效果。 工具调试请使用 v2.1.3 及以上版本，基础库选 3.70.x.1 及以上版本。

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

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

{
  "lazyCodeLoading": "requiredComponents"
}

注意事项

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

IDE 如何开启? 你可以在 IDE (> v2.1.3) 【详情 > 本地设置 > 开启按需注入组件】

如何确定策略是否开启成功？(见图例)

默认情况 (未开启按需注入)	开启按需 (开启按需注入)

如图，你可以在 Network 面板中通过组件加载的策略来观察「按需注入」是否生效

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

用时注入

基础库 3.70.x 及以上版本支持，3.70.x 以下和未配置的效果相同。 工具调试请使用 v2.1.3 及以上版本，基础库选 3.70.x 及以上版本。

在开启「按需注入」特性的前提下，「用时注入」可以指定一部分自定义组件不在小组件启动时注入，而是在真正渲染的时候才进行注入。

在已经指定 lazyCodeLoading 为 requiredComponents 的情况下，为自定义组件配置 占位组件，组件就会自动被视为用时注入组件：

每个页面内，第一次渲染该组件前，该组件都不会被注入； 每个页面内，第一次渲染该组件时，该组件会被渲染为其对应的占位组件，渲染流程结束后开始注入； 注入结束后，占位组件被替换回对应组件。

关于占位组件 (beta)

占位组件 基础库 3.70.x 及以上版本支持，3.70.x 以下和未配置的效果相同

在开启按需注入时，自定义组件所引用的其他自定义组件，在刚开始进行渲染时可能处于不可用的状态。此时，为了使渲染过程不被阻塞，不可用的自定义组件需要一个 「占位组件」（componentPlaceholder）。基础库会用占位组件替代不可用组件进行渲染，在该组件可用后再将占位组件替换回该组件。

一个自定义组件的占位组件可以是另一个自定义组件、或一个内置组件。

配置

页面或自定义组件对应的 JSON 配置中的 componentPlaceholder 字段用于指定占位组件，如：

{
  "usingComponents": {
    "comp-a": "../comp/compA",
    "comp-b": "../comp/compB",
    "comp-c": "../comp/compC"
  },
  "componentPlaceholder": {
    "comp-a": "view",
    "comp-b": "comp-c"
  }
}

该配置表示：

• 组件 comp-a 的占位组件为内置组件 view
• 组件 comp-b 的占位组件为自定义组件 comp-c（其路径在 usingComponents 中配置）

假设该配置对应的模板如下：

  <button ontap="onTap">显示组件</button>
  <comp-a xhs:if="{{ visible }}">
    <comp-b prop="{{ p }}">text in slot</comp-b>
  </comp-a>

小组件启动时 visible 为 false，那么只有 button 会被渲染；点击按钮后，this.setData({ visible: true }) 被执行，此时如果 comp-a, comp-b 均不可用，则页面将被渲染为：

  <button>显示组件</button>
  <view>
    <comp-c prop="{{ p }}">text in slot</comp-c>
  </view>

comp-a 与 comp-b 准备完成后，页面被替换为：

<button>显示组件</button>
<comp-a>
  <comp-b prop="{{ p }}">text in slot</comp-b>
</comp-a>