diff --git a/compiler/src/compile_info.ts b/compiler/src/compile_info.ts
index 9fee66f..d2c095e 100644
--- a/compiler/src/compile_info.ts
+++ b/compiler/src/compile_info.ts
@@ -321,30 +321,32 @@ export class ResultStates {
     this.noteCount = 0;
   }
 
-  private printPreviewResult(resultInfo: string = ""): void {
-    let workerNum: number = Object.keys(cluster.workers).length;
+  private printPreviewResult(resultInfo: string = ''): void {
+    const workerNum: number = Object.keys(cluster.workers).length;
     let count_: number = 0;
-    let blue = this.blue;
-    let reset = this.reset;
+    const blue = this.blue;
+    const reset = this.reset;
     if (workerNum > 0) {
       for (const worker of Object.values(cluster.workers)) {
         worker.on('exit', function(code, signal) {
           count_++;
           if (count_ === workerNum) {
-            printSuccessInfo(resultInfo);
+            this.printSuccessInfo(resultInfo);
           }
         });
       }
     } else {
-      printSuccessInfo(resultInfo);
+      this.printSuccessInfo(resultInfo);
     }
+  }
 
-    function printSuccessInfo(resultInfo: string) {
-      if (resultInfo.length === 0) {
-        console.info(blue, 'COMPILE RESULT:SUCCESS ', reset);
-      } else {
-        console.info(blue, 'COMPILE RESULT:SUCCESS ' + `{${resultInfo}}`, reset);
-      }
+  private printSuccessInfo(resultInfo: string): void {
+    const blue = this.blue;
+    const reset = this.reset;
+    if (resultInfo.length === 0) {
+      console.info(blue, 'COMPILE RESULT:SUCCESS ', reset);
+    } else {
+      console.info(blue, 'COMPILE RESULT:SUCCESS ' + `{${resultInfo}}`, reset);
     }
   }
 
diff --git a/compiler/src/gen_abc.ts b/compiler/src/gen_abc.ts
index 632a5d5..5043681 100644
--- a/compiler/src/gen_abc.ts
+++ b/compiler/src/gen_abc.ts
@@ -21,7 +21,7 @@ import { logger } from './compile_info';
 import {
   SUCCESS,
   FAIL
-} from './pre_define'
+} from './pre_define';
 
 const red: string = '\u001b[31m';
 const reset: string = '\u001b[39m';
diff --git a/compiler/src/gen_abc_plugin.ts b/compiler/src/gen_abc_plugin.ts
index 4c16764..cd1aa3b 100644
--- a/compiler/src/gen_abc_plugin.ts
+++ b/compiler/src/gen_abc_plugin.ts
@@ -369,7 +369,7 @@ function getSmallestSizeGroup(groupSize: Map<number, number>): any {
 function splitJsBundlesBySize(bundleArray: Array<File>, groupNumber: number): any {
   const result: any = [];
   if (bundleArray.length < groupNumber) {
-    for (let value of bundleArray){
+    for (const value of bundleArray) {
       result.push([value]);
     }
     return result;
diff --git a/compiler/src/pre_define.ts b/compiler/src/pre_define.ts
index 9dc8b93..ba10a67 100644
--- a/compiler/src/pre_define.ts
+++ b/compiler/src/pre_define.ts
@@ -73,6 +73,9 @@ export const APP_STORAGE_SET_AND_LINK: string = 'setAndLink';
 export const APP_STORAGE_GET_OR_SET: string = 'GetOrCreate';
 
 export const PAGE_ENTRY_FUNCTION_NAME: string = 'loadDocument';
+export const STORE_PREVIEW_COMPONENTS: string = 'storePreviewComponents';
+export const PREVIEW_COMPONENT_FUNCTION_NAME: string = 'previewComponent';
+export const GET_PREVIEW_FLAG_FUNCTION_NAME: string = 'getPreviewComponentFlag';
 
 export const COMPONENT_DECORATOR_NAME_COMPONENT: string = 'Component';
 export const COMPONENT_DECORATOR_NAME_CUSTOMDIALOG: string = 'CustomDialog';
diff --git a/compiler/src/process_ui_syntax.ts b/compiler/src/process_ui_syntax.ts
index ebba07a..57fd67f 100644
--- a/compiler/src/process_ui_syntax.ts
+++ b/compiler/src/process_ui_syntax.ts
@@ -21,6 +21,9 @@ import { processComponentClass } from './process_component_class';
 import processImport from './process_import';
 import {
   PAGE_ENTRY_FUNCTION_NAME,
+  PREVIEW_COMPONENT_FUNCTION_NAME,
+  STORE_PREVIEW_COMPONENTS,
+  GET_PREVIEW_FLAG_FUNCTION_NAME,
   COMPONENT_CONSTRUCTOR_UNDEFINED,
   BUILD_ON,
   COMPONENT_BUILDER_DECORATOR,
@@ -462,16 +465,18 @@ export function isExtendFunction(node: ts.FunctionDeclaration): string {
 }
 
 function createEntryNode(node: ts.SourceFile, context: ts.TransformationContext): ts.SourceFile {
-  if (componentCollection.entryComponent) {
-    const entryNode: ts.ExpressionStatement =
-      createEntryFunction(componentCollection.entryComponent, context);
-    return context.factory.updateSourceFile(node, [...node.statements, entryNode]);
-  } else if (componentCollection.previewComponent) {
-    const entryNode: ts.ExpressionStatement =
-      createEntryFunction(componentCollection.previewComponent, context);
-    return context.factory.updateSourceFile(node, [...node.statements, entryNode]);
+  if (componentCollection.previewComponent.size === 0 || !projectConfig.isPreview) {
+    if (componentCollection.entryComponent) {
+      const entryNode: ts.ExpressionStatement =
+        createEntryFunction(componentCollection.entryComponent, context);
+      return context.factory.updateSourceFile(node, [...node.statements, entryNode]);
+    } else {
+      return node;
+    }
   } else {
-    return node;
+    const statementsArray: ts.Statement =
+      createPreviewComponentFunction(componentCollection.entryComponent, context);
+    return context.factory.updateSourceFile(node, [...node.statements, statementsArray]);
   }
 }
 
@@ -508,6 +513,63 @@ function createEntryFunction(name: string, context: ts.TransformationContext)
   return newExpressionStatement;
 }
 
+function createPreviewComponentFunction(name: string, context: ts.TransformationContext)
+  : ts.Statement {
+  const newArray: ts.Expression[] = [
+    context.factory.createStringLiteral((++componentInfo.id).toString()),
+    context.factory.createIdentifier(COMPONENT_CONSTRUCTOR_UNDEFINED),
+    context.factory.createObjectLiteralExpression([], false)
+  ];
+  const argsArr: ts.Expression[] = [];
+  componentCollection.previewComponent.forEach(componentName => {
+    const newExpression: ts.Expression = context.factory.createNewExpression(
+      context.factory.createIdentifier(componentName),
+      undefined,
+      newArray
+    );
+    argsArr.push(context.factory.createStringLiteral(componentName));
+    argsArr.push(newExpression);
+  });
+  const ifStatement: ts.Statement = context.factory.createIfStatement(
+    context.factory.createCallExpression(
+      context.factory.createIdentifier(GET_PREVIEW_FLAG_FUNCTION_NAME),
+      undefined,
+      []
+    ),
+    context.factory.createBlock(
+      [context.factory.createExpressionStatement(context.factory.createCallExpression(
+        context.factory.createIdentifier(PREVIEW_COMPONENT_FUNCTION_NAME),
+        undefined,
+        []
+      ))],
+      true
+    ),
+    context.factory.createBlock(
+      [
+        context.factory.createExpressionStatement(context.factory.createCallExpression(
+          context.factory.createIdentifier(STORE_PREVIEW_COMPONENTS),
+          undefined,
+          [
+            context.factory.createNumericLiteral(componentCollection.previewComponent.size),
+            ...argsArr
+          ]
+        )),
+        context.factory.createExpressionStatement(context.factory.createCallExpression(
+          context.factory.createIdentifier(PAGE_ENTRY_FUNCTION_NAME),
+          undefined,
+          [context.factory.createNewExpression(
+            context.factory.createIdentifier(name),
+            undefined,
+            newArray
+          )]
+        ))
+      ],
+      true
+    )
+  );
+  return ifStatement;
+}
+
 export function resetLog(): void {
   transformLog.errors = [];
 }
diff --git a/compiler/src/validate_ui_syntax.ts b/compiler/src/validate_ui_syntax.ts
index 82082d1..c931710 100644
--- a/compiler/src/validate_ui_syntax.ts
+++ b/compiler/src/validate_ui_syntax.ts
@@ -79,7 +79,7 @@ export interface ComponentCollection {
   localStorageName: string;
   entryComponentPos: number;
   entryComponent: string;
-  previewComponent: string;
+  previewComponent: Set<string>;
   customDialogs: Set<string>;
   customComponents: Set<string>;
   currentClassName: string;
@@ -105,7 +105,7 @@ export const componentCollection: ComponentCollection = {
   localStorageName: null,
   entryComponentPos: null,
   entryComponent: null,
-  previewComponent: null,
+  previewComponent: new Set([]),
   customDialogs: new Set([]),
   customComponents: new Set([]),
   currentClassName: null
@@ -278,7 +278,7 @@ function checkDecorators(decorators: ts.NodeArray<ts.Decorator>, result: Decorat
           break;
         case COMPONENT_DECORATOR_PREVIEW:
           result.previewCount++;
-          componentCollection.previewComponent = componentName;
+          componentCollection.previewComponent.add(componentName);
           break;
         case COMPONENT_DECORATOR_COMPONENT:
           hasComponentDecorator = true;
@@ -1051,5 +1051,5 @@ function validateAllowListModule(moduleType: string, systemKey: string): boolean
 export function resetComponentCollection() {
   componentCollection.entryComponent = null;
   componentCollection.entryComponentPos = null;
-  componentCollection.previewComponent = null;
-}
+  componentCollection.previewComponent = new Set([]);
+}