diff --git a/ComponentReuse/entry/src/main/ets/view/UpdaterComponent.ets b/ComponentReuse/entry/src/main/ets/view/UpdaterComponent.ets
index 507e3d0c60552f305934d2a44d9c09f8b779ade5..205413e89ec77d90b4502f05f6ffa381526aca75 100644
--- a/ComponentReuse/entry/src/main/ets/view/UpdaterComponent.ets
+++ b/ComponentReuse/entry/src/main/ets/view/UpdaterComponent.ets
@@ -20,7 +20,7 @@ import { ColorModel } from '../model/BasicDataSource';
 import { ColorData } from '../model/ColorData';
 
 const TAG = 'UpdaterComponent'
-
+// [Start opt_updater]
 export class MyTextUpdater extends AttributeUpdater<TextAttribute> {
   private color: string | number | Resource | Color = '';
 
@@ -34,6 +34,7 @@ export class MyTextUpdater extends AttributeUpdater<TextAttribute> {
   }
 }
 
+// [StartExclude opt_updater]
 @Component
 export struct UpdaterComponent {
   private colorData: ColorData = new ColorData();
@@ -63,6 +64,7 @@ export struct UpdaterComponent {
     }
   }
 }
+// [EndExclude opt_updater]
 
 @Reusable
 @Component
@@ -97,6 +99,7 @@ export struct OneMomentNoModifier {
           .fontWeight(400)
           .lineHeight(21)
       }
+      // [StartExclude opt_updater]
       .borderRadius(16)
       .margin({ top: 14 })
       .padding({
@@ -106,14 +109,18 @@ export struct OneMomentNoModifier {
         bottom: 8
       })
       .backgroundColor('#0D000000')
+      // [EndExclude opt_updater]
     }
+    // [StartExclude opt_updater]
     .alignItems(HorizontalAlign.Start)
     .margin({
       left: 16,
       right: 16
     })
+    // [EndExclude opt_updater]
   }
 }
+// [End opt_updater]
 
 @Builder
 function getUpdaterComponent(name: string): void {
diff --git a/ComponentReuse/entry/src/main/ets/view/WithFuncParam.ets b/ComponentReuse/entry/src/main/ets/view/WithFuncParam.ets
index 72f66546e9cdf6f994ae4114728083d1c07abf34..a45aec396367dcec6b3443f07effa0acfbdd1dab 100644
--- a/ComponentReuse/entry/src/main/ets/view/WithFuncParam.ets
+++ b/ComponentReuse/entry/src/main/ets/view/WithFuncParam.ets
@@ -16,24 +16,26 @@
 import { Constants } from '../common/Constants';
 import { FriendMoment } from '../model/BasicDataSource';
 import { FriendMomentsData } from '../model/FriendMomentData';
-
+// [Start opt_funcParam]
 @Entry
 @Component
 struct WithFuncParam {
   @State sum: number = 0;
+  // [StartExclude opt_funcParam]
   private momentData: FriendMomentsData = new FriendMomentsData(Constants.NAV_DESTINATION_ITEM_3);
   private readonly LIST_CACHE_COUNT: number = 5;
   private readonly LIST_SPACE: number = 18;
+  // [EndExclude opt_funcParam]
   private readonly MOCK_ASYNC_DEFAULT_NUM: number = 1000000;
   private readonly MOCK_ASYNC_TIME_OUT_NUM: number = 2000;
 
   aboutToAppear(): void {
     this.momentData.getFriendMomentFromRawFile();
     // Execute the asynchronous function
-    this.countAndRecord();
+    this.countAndReturn();
   }
 
-  async countAndRecord(): Promise<void> {
+  async countAndReturn(): Promise<void> {
     await this.sleep();
     this.sum = this.MOCK_ASYNC_DEFAULT_NUM;
   }
@@ -59,10 +61,12 @@ struct WithFuncParam {
           }
         }, (moment: FriendMoment) => moment.id)
       }
+      // [StartExclude opt_funcParam]
       .cachedCount(this.LIST_CACHE_COUNT)
       .margin({ top: 8 })
       .width(Constants.LAYOUT_MAX)
       .height(Constants.LAYOUT_MAX)
+      // [EndExclude opt_funcParam]
     }
   }
 }
@@ -72,12 +76,15 @@ struct WithFuncParam {
 export struct OneMoment {
   @Prop moment: FriendMoment;
   @Prop sum: number;
+  // [StartExclude opt_funcParam]
   private readonly LAST_ITEM_INDEX: number = 2;
+  // [EndExclude opt_funcParam]
 
   aboutToReuse(params: Record<string, Object>): void {
     this.sum = params.sum as number;
   }
 
+  // [StartExclude opt_funcParam]
   build() {
     Column() {
       Text(this.moment.text)
@@ -143,7 +150,9 @@ export struct OneMoment {
         .opacity(0.1)
     }
   }
+  // [EndExclude opt_funcParam]
 }
+// [End opt_funcParam]
 
 @Builder
 function getWithFuncParam(name: string): void {
diff --git a/ComponentReuse/entry/src/main/ets/view/WithReuseId.ets b/ComponentReuse/entry/src/main/ets/view/WithReuseId.ets
index a78aeb546c600f5b3116fa3a1f9636a58b70b7fb..bc4494c28ddd7ea96fba490509ad01f3921528e2 100644
--- a/ComponentReuse/entry/src/main/ets/view/WithReuseId.ets
+++ b/ComponentReuse/entry/src/main/ets/view/WithReuseId.ets
@@ -16,10 +16,11 @@
 import { Constants } from '../common/Constants';
 import { FriendMoment } from '../model/BasicDataSource';
 import { FriendMomentsData } from '../model/FriendMomentData'
-
+// [Start opt_reuseId]
 @Entry
 @Component
 struct WithReuseId {
+  // [StartExclude opt_reuseId]
   private momentData: FriendMomentsData = new FriendMomentsData();
   private readonly LIST_CACHE_COUNT: number = 5;
   private readonly LIST_SPACE: number = 18;
@@ -27,6 +28,7 @@ struct WithReuseId {
   aboutToAppear(): void {
     this.momentData.getFriendMomentFromRawFile();
   }
+  // [EndExclude opt_reuseId]
 
   build() {
     Column() {
@@ -38,10 +40,12 @@ struct WithReuseId {
           }
         }, (moment: FriendMoment) => moment.id)
       }
+      // [StartExclude opt_reuseId]
       .cachedCount(this.LIST_CACHE_COUNT)
       .margin({ top: 8 })
       .width(Constants.LAYOUT_MAX)
       .height(Constants.LAYOUT_MAX)
+      // [EndExclude opt_reuseId]
     }
   }
 }
@@ -53,12 +57,14 @@ export struct OneMoment {
 
   build() {
     Column() {
+      // [StartExclude opt_reuseId]
       Text(this.moment.text)
         .width(Constants.LAYOUT_MAX)
         .fontSize(18)
         .fontWeight(500)
         .lineHeight(24)
         .opacity(0.6)
+      // [EndExclude opt_reuseId]
 
       if (this.moment.image !== '') {
         Flex({ wrap: FlexWrap.Wrap }) {
@@ -76,13 +82,16 @@ export struct OneMoment {
         .margin({ top: 14 })
       }
     }
+    // [StartExclude opt_reuseId]
     .justifyContent(FlexAlign.Start)
     .margin({
       left: 16,
       right: 16
     })
+    // [EndExclude opt_reuseId]
   }
 }
+// [End opt_reuseId]
 
 @Builder
 function getWithReuseId(name: string): void {