baidu · 2betop · Jul 9, 2025 · Jul 9, 2025
diff --git a/packages/amis-editor-core/src/component/factory.tsx b/packages/amis-editor-core/src/component/factory.tsx
@@ -13,7 +13,7 @@ import {EditorManager} from '../manager';
 import flatten from 'lodash/flatten';
 import {render as reactRender, unmountComponentAtNode} from 'react-dom';
 import {autobind, JSONGetById, JSONUpdate, appTranslate} from '../util';
-import {ErrorBoundary} from 'amis-core';
+import {ErrorBoundary, LazyComponent} from 'amis-core';
 import {CommonConfigWrapper} from './CommonConfigWrapper';
 import type {Schema} from 'amis';
 import type {DataScope} from 'amis-core';
@@ -207,13 +207,25 @@ export function makeWrapper(
               );
             }}
           >
-            <Wrapper
-              {...rest}
-              render={this.renderChild}
-              $$editor={info}
-              $$node={this.editorNode}
-              ref={this.wrapperRef}
-            />
+            {info.useLazyRender ? (
+              <LazyComponent placeholder={<span />}>
+                <Wrapper
+                  {...rest}
+                  render={this.renderChild}
+                  $$editor={info}
+                  $$node={this.editorNode}
+                  ref={this.wrapperRef}
+                />
+              </LazyComponent>
+            ) : (
+              <Wrapper
+                {...rest}
+                render={this.renderChild}
+                $$editor={info}
+                $$node={this.editorNode}
+                ref={this.wrapperRef}
+              />
+            )}
           </ErrorBoundary>
         </EditorNodeContext.Provider>
       );

diff --git a/packages/amis-editor-core/src/plugin.ts b/packages/amis-editor-core/src/plugin.ts
@@ -214,6 +214,11 @@ export interface InlineEditableElement {
  * 渲染器信息。
  */
 export interface RendererInfo extends RendererScaffoldInfo {
+  // 是否使用懒渲染，默认 false
+  // 当一个页面有很多组件时，开启懒渲染可以提升性能。
+  // 打算正对容器组件开启懒渲染
+  useLazyRender?: boolean;
+
   scaffolds?: Array<Partial<RendererScaffoldInfo>>;
 
   rendererName?: string;
@@ -1149,7 +1154,8 @@ export abstract class BasePlugin implements PluginInterface {
         isListComponent: plugin.isListComponent,
         rendererName: plugin.rendererName,
         memberImmutable: plugin.memberImmutable,
-        getSubEditorVariable: plugin.getSubEditorVariable
+        getSubEditorVariable: plugin.getSubEditorVariable,
+        useLazyRender: plugin.useLazyRender
       };
     }
   }

diff --git a/packages/amis-editor/src/plugin/CRUD.tsx b/packages/amis-editor/src/plugin/CRUD.tsx
@@ -60,6 +60,7 @@ export class CRUDPlugin extends BasePlugin {
   static id = 'CRUDPlugin';
   // 关联渲染器名字
   rendererName = 'crud';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/CRUDSchema.json';
 
   order = -800;

diff --git a/packages/amis-editor/src/plugin/Collapse.tsx b/packages/amis-editor/src/plugin/Collapse.tsx
@@ -23,6 +23,7 @@ export class CollapsePlugin extends BasePlugin {
   static id = 'CollapsePlugin';
   // 关联渲染器名字
   rendererName = 'collapse';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/CollapseSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/CollapseGroup.tsx b/packages/amis-editor/src/plugin/CollapseGroup.tsx
@@ -15,6 +15,7 @@ export class CollapseGroupPlugin extends BasePlugin {
   static id = 'CollapseGroupPlugin';
   // 关联渲染器名字
   rendererName = 'collapse-group';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/CollapseGroupSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx
@@ -22,6 +22,7 @@ export class ContainerPlugin extends LayoutBasePlugin {
   static scene = ['layout'];
   // 关联渲染器名字
   rendererName = 'container';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/ContainerSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/Each.tsx b/packages/amis-editor/src/plugin/Each.tsx
@@ -12,6 +12,7 @@ export class EachPlugin extends BasePlugin {
   static scene = ['layout'];
   // 关联渲染器名字
   rendererName = 'each';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/EachSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/Form/FieldSet.tsx b/packages/amis-editor/src/plugin/Form/FieldSet.tsx
@@ -9,6 +9,7 @@ export class FieldSetControlPlugin extends BasePlugin {
   static id = 'FieldSetControlPlugin';
   // 关联渲染器名字
   rendererName = 'fieldset';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/FieldSetControlSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/Form/Form.tsx b/packages/amis-editor/src/plugin/Form/Form.tsx
@@ -69,6 +69,8 @@ export class FormPlugin extends BasePlugin {
 
   name = '表单';
 
+  useLazyRender = true;
+
   panelTitle = '表单';
   // 关联渲染器名字
   rendererName = 'form';

diff --git a/packages/amis-editor/src/plugin/Grid.tsx b/packages/amis-editor/src/plugin/Grid.tsx
@@ -24,6 +24,7 @@ export class GridPlugin extends BasePlugin {
   static scene = ['layout'];
   // 关联渲染器名字
   rendererName = 'grid';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/GridSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/HBox.tsx b/packages/amis-editor/src/plugin/HBox.tsx
@@ -24,6 +24,7 @@ export class HBoxPlugin extends BasePlugin {
   static scene = ['layout'];
   // 关联渲染器名字
   rendererName = 'hbox';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/HBoxSchema.json';
   disabledRendererPlugin = true; // 组件面板不显示
 

diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
@@ -85,6 +85,7 @@ const defaultFlexContainerSchema = (
 export class FlexPluginBase extends LayoutBasePlugin {
   static id = 'FlexPluginBase';
   rendererName = 'flex';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/FlexSchema.json';
   disabledRendererPlugin = false;
 

diff --git a/packages/amis-editor/src/plugin/List.tsx b/packages/amis-editor/src/plugin/List.tsx
@@ -29,6 +29,7 @@ export class ListPlugin extends BasePlugin {
   static id = 'ListPlugin';
   // 关联渲染器名字
   rendererName = 'list';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/ListSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/List2.tsx b/packages/amis-editor/src/plugin/List2.tsx
@@ -20,6 +20,7 @@ export class List2Plugin extends BasePlugin {
   static scene = ['layout'];
   // 关联渲染器名字
   rendererName = 'cards';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/CardsSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/Panel.tsx b/packages/amis-editor/src/plugin/Panel.tsx
@@ -18,6 +18,7 @@ export class PanelPlugin extends BasePlugin {
   static id = 'PanelPlugin';
   // 关联渲染器名字
   rendererName = 'panel';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/panelSchema.json';
 
   name = '面板';

diff --git a/packages/amis-editor/src/plugin/Service.tsx b/packages/amis-editor/src/plugin/Service.tsx
@@ -33,6 +33,7 @@ export class ServicePlugin extends BasePlugin {
   static id = 'ServicePlugin';
   // 关联渲染器名字
   rendererName = 'service';
+  useLazyRender = true; // 使用懒渲染
 
   name = '服务Service';
 

diff --git a/packages/amis-editor/src/plugin/Table.tsx b/packages/amis-editor/src/plugin/Table.tsx
@@ -43,6 +43,7 @@ export class TablePlugin extends BasePlugin {
   static id = 'TablePlugin';
   // 关联渲染器名字
   rendererName = 'table';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/TableSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/Table2.tsx b/packages/amis-editor/src/plugin/Table2.tsx
@@ -355,6 +355,7 @@ export class Table2Plugin extends BasePlugin {
   pluginIcon = 'table-plugin';
 
   rendererName = 'table2';
+  useLazyRender = true; // 使用懒渲染
 
   isBaseComponent = true;
 

diff --git a/packages/amis-editor/src/plugin/TableView.tsx b/packages/amis-editor/src/plugin/TableView.tsx
@@ -91,6 +91,7 @@ export class TableViewPlugin extends BasePlugin {
   static id = 'TableViewPlugin';
   // 关联渲染器名字
   rendererName = 'table-view';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/TableViewSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/Tabs.tsx b/packages/amis-editor/src/plugin/Tabs.tsx
@@ -27,6 +27,7 @@ export class TabsPlugin extends BasePlugin {
   static id = 'TabsPlugin';
   // 关联渲染器名字
   rendererName = 'tabs';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/TabsSchema.json';
 
   // 组件名称

diff --git a/packages/amis-editor/src/plugin/Wizard.tsx b/packages/amis-editor/src/plugin/Wizard.tsx
@@ -28,6 +28,7 @@ export class WizardPlugin extends BasePlugin {
   static id = 'WizardPlugin';
   // 关联渲染器名字
   rendererName = 'wizard';
+  useLazyRender = true; // 使用懒渲染
   $schema = '/schemas/WizardSchema.json';
 
   name = '向导';