fix: get route assets by route manifest (#6083)

alibaba · Mar 23, 2023 · 764ef0b · 764ef0b
1 parent 085498a
commit 764ef0b
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 21 deletions.
diff --git a/.changeset/quick-grapes-breathe.md b/.changeset/quick-grapes-breathe.md
@@ -0,0 +1,6 @@
+---
+'@ice/route-manifest': patch
+'@ice/app': patch
+---
+
+fix: get route assets by route manifest
diff --git a/examples/memory-router/ice.config.mts b/examples/memory-router/ice.config.mts
@@ -4,7 +4,7 @@ export default defineConfig(() => ({
   publicPath: '/',
   ssr: false,
   ssg: false,
-  splitChunks: false,
+  codeSplitting: 'page',
   routes: {
     injectInitialEntry: true,
   }

diff --git a/examples/memory-router/src/pages/dashboard/index.tsx b/examples/memory-router/src/pages/dashboard/index.tsx
@@ -0,0 +1,7 @@
+export default function Dashboard() {
+  return (
+    <div>
+      <h2>dashboard</h2>
+    </div>
+  );
+}
diff --git a/packages/ice/src/commands/build.ts b/packages/ice/src/commands/build.ts
@@ -19,6 +19,7 @@ import generateEntry from '../utils/generateEntry.js';
 import { logger } from '../utils/logger.js';
 import { getExpandedEnvs } from '../utils/runtimeEnv.js';
 import type RouteManifest from '../utils/routeManifest.js';
+import injectInitialEntry from '../utils/injectInitialEntry.js';
 
 const build = async (
   context: Context<Config, ExtendsPluginAPI>,
@@ -156,20 +157,7 @@ const build = async (
   output.paths = [...outputPaths];
 
   if (routeType === 'memory' && userConfig?.routes?.injectInitialEntry) {
-    // Read the latest routes info.
-    const routePaths = routeManifest.getFlattenRoute();
-    routePaths.forEach((routePath) => {
-      // Inject `initialPath` when router type is memory.
-      const routeAssetPath = path.join(outputDir, 'js',
-        `p_${routePath === '/' ? 'index' : routePath.replace(/^\//, '').replace(/\//g, '-')}.js`);
-      if (fse.existsSync(routeAssetPath)) {
-        fse.writeFileSync(routeAssetPath,
-          `window.__ICE_APP_CONTEXT__=Object.assign(window.__ICE_APP_CONTEXT__||{}, {routePath: '${routePath}'});${
-            fse.readFileSync(routeAssetPath, 'utf-8')}`);
-      } else {
-        logger.warn(`Can not find ${routeAssetPath} when inject initial path.`);
-      }
-    });
+    injectInitialEntry(routeManifest, outputDir);
   }
 
   await applyHook('after.build.compile', {

diff --git a/packages/ice/src/middlewares/renderMiddleware.ts b/packages/ice/src/middlewares/renderMiddleware.ts
@@ -1,6 +1,5 @@
 import type { ExpressRequestHandler, Middleware } from 'webpack-dev-server';
 import type { ServerContext, RenderMode } from '@ice/runtime';
-// @ts-expect-error FIXME: esm type error
 import matchRoutes from '@ice/runtime/matchRoutes';
 import type { TaskConfig } from 'build-scripts';
 import type { Config } from '@ice/webpack-config/types';

diff --git a/packages/ice/src/utils/injectInitialEntry.ts b/packages/ice/src/utils/injectInitialEntry.ts
@@ -0,0 +1,35 @@
+import path from 'path';
+import fse from 'fs-extra';
+import type { RouteItem } from '@ice/runtime/types';
+import matchRoutes from '@ice/runtime/matchRoutes';
+import { logger } from './logger.js';
+import type RouteManifest from './routeManifest.js';
+
+function getRouteAsset(routeManifest: RouteItem[], routePath: string): string {
+  const matches = matchRoutes(routeManifest, routePath);
+  // Ingnore layout assets and return leaf route.
+  const routeMatch = matches[matches.length - 1];
+  const componentName = routeMatch?.route?.componentName;
+  return componentName ? `p_${componentName}.js` : '';
+}
+
+function injectInitialEntry(routeManifest: RouteManifest, outputDir: string) {
+  // Read the latest routes info.
+  const routePaths = routeManifest.getFlattenRoute();
+  const routeItems = routeManifest.getNestedRoute();
+  routePaths.forEach((routePath) => {
+    const routeAsset = getRouteAsset(routeItems, routePath);
+    // Inject `initialPath` when router type is memory.
+    const routeAssetPath = path.join(outputDir, 'js', routeAsset);
+    if (fse.existsSync(routeAssetPath)) {
+      fse.writeFileSync(routeAssetPath,
+        `window.__ICE_APP_CONTEXT__=Object.assign(window.__ICE_APP_CONTEXT__||{}, {routePath: '${routePath}'});${
+          fse.readFileSync(routeAssetPath, 'utf-8')}`);
+    } else {
+      logger.warn(`Can not find ${routeAssetPath} when inject initial path.`);
+    }
+  });
+}
+
+export default injectInitialEntry;
+
diff --git a/packages/route-manifest/src/routes.ts b/packages/route-manifest/src/routes.ts
@@ -24,7 +24,7 @@ export interface ConfigRoute {
   /**
    * The path this route uses to match on the URL pathname.
    */
-  path?: string;
+  path: string;
   /**
    * Should be `true` if it is an index route. This disallows child routes.
    */

diff --git a/packages/runtime/matchRoutes.d.ts b/packages/runtime/matchRoutes.d.ts
@@ -0,0 +1,3 @@
+import matchRoutes from './esm/matchRoutes';
+
+export default matchRoutes;
diff --git a/website/docs/guide/advanced/code-splitting.md b/website/docs/guide/advanced/code-splitting.md
@@ -26,12 +26,12 @@ export default function Home() {
 
 ## 控制三方依赖的分包
 
-三方依赖默认根据体积大小进行拆分。如果三方依赖过多，在某些场景下可能出现较多的网络请求，导致页面加载速度过慢，可关闭 [splitChunks](../basic/config.md#splitchunks) 配置：
+三方依赖默认根据体积大小进行拆分。如果三方依赖过多，在某些场景下可能出现较多的网络请求，导致页面加载速度过慢，可关闭 [codeSplitting](../basic/config#codesplitting) 配置：
 
-```diff title="ice.config.mts"
+```ts title="ice.config.mts"
 import { defineConfig } from '@ice/app';
 
 export default defineConfig(() => ({
-+  splitChunks: false,
-}));
+  codeSplitting: 'page',
+}))
 ```
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import matchRoutes from './esm/matchRoutes';

		export default matchRoutes;