Fix: optimize the route code generated by framework

.changeset/fresh-roses-poke.md

@@ -0,0 +1,5 @@
+---
+'@ice/app': patch
+---
+
+fix: optimize the route code generate by framework

.changeset/gentle-turtles-fry.md

@@ -0,0 +1,7 @@
+---
+'@ice/webpack-config': patch
+'@ice/rspack-config': patch
+'@ice/shared-config': patch
+---
+
+fix: support remove the manifest info from bundle

packages/ice/src/plugins/task.ts

@@ -28,7 +28,9 @@ const getDefaultTaskConfig = ({ rootDir, command }): Config => {
       'universal-env': envReplacement,
       '@uni/env': envReplacement,
     },
-    assetsManifest: true,
+    assetsManifest: {
+      inject: true,
+    },
     fastRefresh: command === 'start',
     logging: process.env.WEBPACK_LOGGING || defaultLogging,
     minify: command === 'build',

packages/ice/src/routes.ts

@@ -89,39 +89,10 @@ export function getRoutesDefinition(options: GetDefinationOptions) {
       routeImports.push(`import * as ${routeSpecifier} from '${formatPath(componentPath)}';`);
       loadStatement = routeSpecifier;
     }
-    const component = `Component: () => WrapRouteComponent({
-          routeId: '${id}',
-          isLayout: ${layout},
-          routeExports: ${lazy ? 'componentModule' : loadStatement},
-        })`;
-    const loader = `loader: createRouteLoader({
-          routeId: '${id}',
-          requestContext,
-          renderMode,
-          module: ${lazy ? 'componentModule' : loadStatement},
-        })`;
-    const routeProperties: string[] = [
-      `path: '${formatPath(routePath || '')}',`,
-      `async lazy() {
-      ${lazy ? `const componentModule = await ${loadStatement}` : ''};
-      return {
-        ${lazy ? '...componentModule' : `...${loadStatement}`},
-        ${component},
-        ${loader},
-      };
-    },`,
-      // Empty errorElement to avoid default ui provided by react-router.
-      'errorElement: <RouteErrorComponent />,',
-      `componentName: '${componentName}',`,
-      `index: ${index},`,
-      `id: '${id}',`,
-      'exact: true,',
-      `exports: ${JSON.stringify(exports)},`,
-    ].filter(Boolean);
-
-    if (layout) {
-      routeProperties.push('layout: true,');
-    }
+    // Keep the string in a single line for the code style.
+    const lazyStatment = `lazyLoadComponent(${lazy ? 'componentModule' : loadStatement}, { routeId: '${id}', ${layout ? `layout: ${layout}, ` : ''}renderMode, requestContext })`;
+    const routeProperties: string[] = [`...getRouteProps({ path: '${formatPath(routePath || '')}', componentName: '${componentName}', ${index ? `index: ${index}, ` : ''}id: '${id}',${layout ? `layout: ${layout}, ` : ''}exports: ${JSON.stringify(exports)} }),`];
+    routeProperties.push(`async lazy() {${lazy ? `const componentModule = await ${loadStatement}` : ''}; return ${lazyStatment};},`);
     if (children) {
       const res = getRoutesDefinition({
         manifest: children,

packages/ice/templates/core/routes.tsx.ejs

@@ -1,5 +1,53 @@
+import * as React from 'react';
 import { createRouteLoader, WrapRouteComponent, RouteErrorComponent } from '@ice/runtime';
 import type { CreateRoutes } from '@ice/runtime';
+import type { ComponentModule, RenderMode, RequestContext } from '@ice/runtime/types';
+
+interface RouteOptions {
+  routeId: string;
+  layout?: boolean;
+  renderMode: RenderMode;
+  requestContext?: RequestContext;
+}
+function lazyLoadComponent(componentModule: ComponentModule, options: RouteOptions) {
+  const { routeId, layout, renderMode, requestContext } = options;
+  return {
+    ...componentModule,
+    Component: () => WrapRouteComponent({
+      routeId: routeId,
+      isLayout: Boolean(layout),
+      routeExports: componentModule,
+    }),
+    loader: createRouteLoader({
+      routeId: options.routeId,
+      requestContext,
+      renderMode,
+      module: componentModule,
+    }),
+  };
+}
+interface GetRoutePropsOptions {
+  path: string;
+  componentName: string;
+  index?: any;
+  id: string;
+  exports: string[];
+  layout?: boolean;
+}
+function getRouteProps(options: GetRoutePropsOptions) {
+  const { path, componentName, index, id, exports, layout } = options;
+  return {
+    path,
+    componentName,
+    errorElement: <RouteErrorComponent />,
+    index,
+    id,
+    exports,
+    layout: Boolean(layout),
+    exact: true,
+  };
+}
+
 <%- routeImports.length ? routeImports.join('\n') + '\n\n' : ''; -%>
 const createRoutes: CreateRoutes = ({
   requestContext,

packages/rspack-config/src/index.ts

@@ -146,7 +146,7 @@ const getConfig: GetConfig = async (options) => {
     module: true,
   }, minimizerOptions);
   const builtinFeatures: BuiltinFeatures = {
-    assetsManifest,
+    assetsManifest: Boolean(assetsManifest),
   };
   let splitChunksStrategy = null;
   // Use builtin splitChunks strategy by default.

packages/shared-config/src/types.ts

@@ -177,7 +177,7 @@ export interface Config {
 
   performance?: Performance;
 
-  assetsManifest?: boolean;
+  assetsManifest?: boolean | { inject: boolean };
 
   concatenateModules?: boolean;
 

packages/webpack-config/src/index.ts

@@ -288,6 +288,7 @@ export function getWebpackConfig(options: GetWebpackConfigOptions): Configuratio
       assetsManifest && new AssetsManifestPlugin({
         fileName: 'assets-manifest.json',
         outputDir: path.join(rootDir, runtimeTmpDir),
+        inject: typeof assetsManifest === 'boolean' ? false : assetsManifest?.inject,
       }),
       analyzer && new BundleAnalyzerPlugin(),
       tsCheckerOptions && new ForkTsCheckerPlugin(tsCheckerOptions),

packages/webpack-config/src/webpackPlugins/AssetsManifestPlugin.ts

@@ -21,13 +21,22 @@ function filterAssets(assets: Assets): string[] {
   );
 }
 
+interface PluginOptions {
+  fileName?: string;
+  outputDir?: string;
+  // Inject assets manifest to entry file.
+  inject?: boolean;
+}
+
 export default class AssetsManifestPlugin {
   private fileName: string;
   private outputDir: string;
+  private inject: boolean;
 
-  public constructor(options) {
+  public constructor(options: PluginOptions) {
     this.fileName = options.fileName || 'assets-manifest.json';
     this.outputDir = options.outputDir || './';
+    this.inject = options.inject;
   }
 
   public createAssets(compilation: Compilation) {
@@ -77,12 +86,14 @@ export default class AssetsManifestPlugin {
     // Emit asset manifest for server compile.
     compilation.emitAsset(this.fileName, new webpack.sources.RawSource(output));
     // Inject assets manifest to entry file.
-    entryFiles.forEach((entryFile) => {
-      compilation.assets[entryFile] = new webpack.sources.ConcatSource(
-        new webpack.sources.RawSource(String(`window.__ICE_ASSETS_MANIFEST__=${output};\n`)),
-        compilation.assets[entryFile],
-      );
-    });
+    if (this.inject) {
+      entryFiles.forEach((entryFile) => {
+        compilation.assets[entryFile] = new webpack.sources.ConcatSource(
+          new webpack.sources.RawSource(String(`window.__ICE_ASSETS_MANIFEST__=${output};\n`)),
+          compilation.assets[entryFile],
+        );
+      });
+    }
   }
 
   public apply(compiler: Compiler) {