chore: docs and default prefetch config

umijs · Dec 12, 2024 · ed43263 · ed43263
1 parent 5873b48
commit ed43263
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 10 deletions.
diff --git a/docs/docs/docs/api/api.en-US.md b/docs/docs/docs/api/api.en-US.md
@@ -187,7 +187,8 @@ Type definition is as follows:
 
 ```ts
 declare function Link(props: {
-  prefetch?: boolean;
+  prefetch?: boolean | 'intent' | 'render' | 'viewport' | 'none';
+  prefetchTimeout?: number;
   to: string | Partial<{ pathname: string; search: string; hash: string }>;
   replace?: boolean;
   state?: any;
@@ -207,7 +208,7 @@ function IndexPage({ user }) {
 
 `<Link to>` supports relative path navigation; `<Link reloadDocument>` does not do routing navigation and is equivalent to the jump behavior of `<a href>`.
 
-If `prefetch` is enabled, then when the user hovers over the component, Umi will automatically start preloading the component js files and data for the routing jump. (Note: Use this feature when `routePrefetch` and `manifest` are enabled)
+If `prefetch` is enabled, then when the user hovers over the component, Umi will automatically start preloading the component js files and data for the routing jump. (Note: Use this feature when `routePrefetch` is enabled)
 
 ### matchPath
 

diff --git a/docs/docs/docs/api/api.md b/docs/docs/docs/api/api.md
@@ -186,7 +186,8 @@ unlisten();
 
 ```ts
 declare function Link(props: {
-  prefetch?: boolean;
+  prefetch?: boolean | 'intent' | 'render' | 'viewport' | 'none';
+  prefetchTimeout?: number;
   to: string | Partial<{ pathname: string; search: string; hash: string }>;
   replace?: boolean;
   state?: any;
@@ -206,7 +207,7 @@ function IndexPage({ user }) {
 
 `<Link to>` 支持相对路径跳转；`<Link reloadDocument>` 不做路由跳转，等同于 `<a href>` 的跳转行为。
 
-若开启了 `prefetch` 则当用户将鼠标放到该组件上方时，Umi 就会自动开始进行跳转路由的组件 js 文件和数据预加载。（注：使用此功能请同时开启 `routePrefetch` 和 `manifest` 配置）
+若开启了 `prefetch` 则当用户将鼠标放到该组件上方时，Umi 就会自动开始进行跳转路由的组件 js 文件和数据预加载。（注：使用此功能请开启 `routePrefetch` 配置）
 
 ### matchPath
 

diff --git a/docs/docs/docs/api/config.en-US.md b/docs/docs/docs/api/config.en-US.md
@@ -1304,7 +1304,7 @@ Configure how routes are loaded. Setting moduleType to 'cjs' will load route com
 
 ## routePrefetch
 
-- Type: `boolean`
+- Type: `{ defaultPrefetch: 'none' | 'intent' | 'render' | 'viewport', defaultPrefetchTimeout: number } | false`
 - Default: `false`
 
 Enable route preloading functionality.

diff --git a/docs/docs/docs/api/config.md b/docs/docs/docs/api/config.md
@@ -1311,7 +1311,7 @@ proxy: {
 
 ## routePrefetch
 
-- 类型：`boolean`
+- 类型：`{ defaultPrefetch: 'none' | 'intent' | 'render' | 'viewport', defaultPrefetchTimeout: number } | false`
 - 默认值：`false`
 
 启用路由预加载功能。

diff --git a/packages/preset-umi/src/features/routePrefetch/routePrefetch.ts b/packages/preset-umi/src/features/routePrefetch/routePrefetch.ts
@@ -4,13 +4,27 @@ export default (api: IApi) => {
   api.describe({
     config: {
       schema({ zod }) {
-        return zod.object({});
+        return zod.object({
+          defaultPrefetch: zod
+            .enum(['none', 'intent', 'render', 'viewport'])
+            .optional(),
+          defaultPrefetchTimeout: zod.number().optional(),
+        });
       },
     },
     enableBy: api.EnableBy.config,
   });
 
   api.addEntryCodeAhead(() => {
-    return `if(typeof window !== 'undefined') window.__umi_route_prefetch__ = true;`;
+    return `if(typeof window !== 'undefined') window.__umi_route_prefetch__ =
+      {
+        defaultPrefetch: ${JSON.stringify(
+          api.config.routePrefetch.defaultPrefetch || 'none',
+        )},
+        defaultPrefetchTimeout: ${JSON.stringify(
+          api.config.routePrefetch.defaultPrefetchTimeout || 50,
+        )},
+      };
+    `;
   });
 };
diff --git a/packages/renderer-react/src/link.tsx b/packages/renderer-react/src/link.tsx
@@ -21,18 +21,25 @@ export const LinkWithPrefetch = React.forwardRef(
     props: PropsWithChildren<
       {
         prefetch?: boolean | 'intent' | 'render' | 'viewport' | 'none';
+        prefetchTimeout?: number;
       } & LinkProps &
         React.RefAttributes<HTMLAnchorElement>
     >,
     forwardedRef,
   ) => {
     const { prefetch: prefetchProp, ...linkProps } = props;
+    const { defaultPrefetch, defaultPrefetchTimeout } =
+      typeof window !== 'undefined'
+        ? // @ts-ignore
+          window.__umi_route_prefetch__
+        : { defaultPrefetch: 'none', defaultPrefetchTimeout: 50 };
+
     const prefetch =
       (prefetchProp === true
         ? 'intent'
         : prefetchProp === false
         ? 'none'
-        : prefetchProp) || 'none';
+        : prefetchProp) || defaultPrefetch;
     if (!['intent', 'render', 'viewport', 'none'].includes(prefetch)) {
       throw new Error(
         `Invalid prefetch value ${prefetch} found in Link component`,
@@ -52,7 +59,7 @@ export const LinkWithPrefetch = React.forwardRef(
       eventTarget.preloadTimeout = setTimeout(() => {
         eventTarget.preloadTimeout = null;
         appData.preloadRoute?.(to!);
-      }, 50);
+      }, props.prefetchTimeout || defaultPrefetchTimeout);
     };
     const handleMouseLeave = (e: React.MouseEvent<HTMLAnchorElement>) => {
       if (prefetch !== 'intent') return;