feat(cli): 添加dynamicImport配置参数，用于设置是否使用import()来加载组件

re #366

packages/cli/bin/tmagic.js

@@ -8,4 +8,5 @@ cli({
   componentFileAffix: '',
   cleanTemp: true,
   temp: '.tmagic',
+  dynamicImport: false,
 });

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;
 }

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`;