From c817ad6bb680a84453ef3d99de14c8d8a36b1f58 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 22 Sep 2022 15:21:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(cli):=20=E6=B7=BB=E5=8A=A0dynamicImport?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8F=82=E6=95=B0=EF=BC=8C=E7=94=A8=E4=BA=8E?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=98=AF=E5=90=A6=E4=BD=BF=E7=94=A8import()?=
 =?UTF-8?q?=E6=9D=A5=E5=8A=A0=E8=BD=BD=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

re #366
---
 packages/cli/bin/tmagic.js                 |  1 +
 packages/cli/src/types.ts                  |  2 ++
 packages/cli/src/utils/prepareEntryFile.ts | 28 +++++++++++++++++-----
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/cli/bin/tmagic.js b/packages/cli/bin/tmagic.js
index 4294dce1..dca2c061 100755
--- a/packages/cli/bin/tmagic.js
+++ b/packages/cli/bin/tmagic.js
@@ -8,4 +8,5 @@ cli({
   componentFileAffix: '',
   cleanTemp: true,
   temp: '.tmagic',
+  dynamicImport: false,
 });
diff --git a/packages/cli/src/types.ts b/packages/cli/src/types.ts
index bed01e42..b01b5d99 100644
--- a/packages/cli/src/types.ts
+++ b/packages/cli/src/types.ts
@@ -58,6 +58,8 @@ export interface UserConfig {
   cleanTemp: boolean;
   /** npm 配置，用于当packages配置有npm包名时，可以自动安装npm包 */
   npmConfig?: NpmConfig;
+  /** 是否使用import()加载组件 */
+  dynamicImport?: boolean;
   onInit?: (app: Core) => ModuleMainFilePath | Promise<ModuleMainFilePath>;
   onPrepare?: (app: Core) => void;
 }
diff --git a/packages/cli/src/utils/prepareEntryFile.ts b/packages/cli/src/utils/prepareEntryFile.ts
index 00954091..bd7a95b1 100644
--- a/packages/cli/src/utils/prepareEntryFile.ts
+++ b/packages/cli/src/utils/prepareEntryFile.ts
@@ -5,25 +5,41 @@ import { EntryType } from '../types';
 
 export const prepareEntryFile = (app: App) => {
   const { componentMap = {}, pluginMap = {}, configMap = {}, valueMap = {}, eventMap = {} } = app.moduleMainFilePath;
-  const { componentFileAffix } = app.options;
+  const { componentFileAffix, dynamicImport } = app.options;
 
   app.writeTemp('comp-entry.ts', generateContent(EntryType.COMPONENT, componentMap, componentFileAffix));
+  app.writeTemp(
+    'async-comp-entry.ts',
+    generateContent(EntryType.COMPONENT, componentMap, componentFileAffix, dynamicImport),
+  );
+
   app.writeTemp('plugin-entry.ts', generateContent(EntryType.PLUGIN, pluginMap));
   app.writeTemp('config-entry.ts', generateContent(EntryType.CONFIG, configMap));
   app.writeTemp('value-entry.ts', generateContent(EntryType.VALUE, valueMap));
   app.writeTemp('event-entry.ts', generateContent(EntryType.EVENT, eventMap));
 };
 
-const generateContent = (type: EntryType, map: Record<string, string>, componentFileAffix = '') => {
+const generateContent = (
+  type: EntryType,
+  map: Record<string, string>,
+  componentFileAffix = '',
+  dynamicImport = false,
+) => {
   const list: string[] = [];
   const importDeclarations: string[] = [];
 
   Object.entries(map).forEach(([key, packagePath]) => {
     const name = makeCamelCase(key);
-    importDeclarations.push(
-      `import ${name} from '${packagePath}${packagePath.endsWith(componentFileAffix) ? '' : componentFileAffix}'`,
-    );
-    list.push(`'${key}': ${name}`);
+    if (dynamicImport) {
+      list.push(
+        `'${key}': import('${packagePath}${packagePath.endsWith(componentFileAffix) ? '' : componentFileAffix}')`,
+      );
+    } else {
+      importDeclarations.push(
+        `import ${name} from '${packagePath}${packagePath.endsWith(componentFileAffix) ? '' : componentFileAffix}'`,
+      );
+      list.push(`'${key}': ${name}`);
+    }
   });
 
   const exportToken = `${type}s`;