refactor: prefetch to preload and extract as utils

packages/preset-umi/.fatherrc.ts

@@ -6,10 +6,10 @@ export default defineConfig({
     ignores: ['src/client/*'],
   },
   umd: {
-    entry: 'src/client/prefetchRouteFilesScp.ts',
+    entry: 'src/client/preloadRouteFilesScp.ts',
     output: 'templates/routePrefetch',
     chainWebpack(memo) {
-      memo.output.filename('prefetchRouteFilesScp.js');
+      memo.output.filename('preloadRouteFilesScp.js');
       memo.output.delete('libraryTarget');
       memo.output.iife(true);
 

packages/preset-umi/src/client/preloadRouteFilesScp.ts

@@ -0,0 +1,48 @@
+/**
+ * NOTE: DO NOT USE ADVANCED SYNTAX IN THIS FILE, TO AVOID INSERT HELPERS TO REDUCE SCRIPT SIZE.
+ */
+
+import { getPreloadRouteFiles } from '../features/routePrefetch/utils';
+
+const basename = '{{basename}}';
+const publicPath = '{{publicPath}}';
+const pathname = location.pathname;
+const routePath =
+  pathname.startsWith(basename) &&
+  decodeURI(`/${pathname.slice(basename.length)}`);
+
+// skip preload if basename not match
+if (routePath) {
+  const map = '{{routeChunkFilesMap}}' as any;
+  const doc = document;
+  const head = doc.head;
+  const createElement = doc.createElement.bind(doc);
+  const files = getPreloadRouteFiles(routePath, map, {
+    publicPath,
+  });
+
+  files?.forEach((file) => {
+    const type = file.type;
+    const url = file.url;
+    let tag: HTMLLinkElement | HTMLScriptElement;
+
+    if (type === 'js') {
+      tag = createElement('script');
+      tag.src = url;
+      tag.async = true;
+    } else if (type === 'css') {
+      tag = createElement('link');
+      tag.href = url;
+      tag.rel = 'preload';
+      tag.as = 'style';
+    } else {
+      return;
+    }
+
+    file.attrs.forEach((attr) => {
+      tag.setAttribute(attr[0], attr[1] || '');
+    });
+
+    head.appendChild(tag);
+  });
+}

packages/preset-umi/src/features/routePrefetch/routePrefetch.ts

@@ -5,7 +5,7 @@ import { dirname, isAbsolute, join, relative } from 'path';
 import { TEMPLATES_DIR } from '../../constants';
 import { createResolver } from '../../libs/scan';
 import type { IApi, IRoute } from '../../types';
-import { PREFETCH_ROUTE_MAP_SCP_TYPE } from './prefetchRouteFiles';
+import { PRELOAD_ROUTE_MAP_SCP_TYPE } from './utils';
 
 export interface IRouteChunkFilesMap {
   /**
@@ -95,15 +95,15 @@ export default (api: IApi) => {
       ? // map mode
         [
           {
-            type: PREFETCH_ROUTE_MAP_SCP_TYPE,
+            type: PRELOAD_ROUTE_MAP_SCP_TYPE,
             content: JSON.stringify(routeChunkFilesMap),
           },
         ]
       : // script mode
         [
           {
             content: readFileSync(
-              join(TEMPLATES_DIR, 'routePrefetch/prefetchRouteFilesScp.js'),
+              join(TEMPLATES_DIR, 'routePrefetch/preloadRouteFilesScp.js'),
               'utf-8',
             )
               .replace(
@@ -147,7 +147,7 @@ export default (api: IApi) => {
             );
           } catch (err) {
             logger.error(
-              `[routePrefetch]: route file resolve error, cannot prefetch for ${origin.request!}`,
+              `[routePrefetch]: route file resolve error, cannot preload for ${origin.request!}`,
             );
             continue;
           }
@@ -205,7 +205,7 @@ export default (api: IApi) => {
             files.push(fileAbsPath);
           } catch {
             logger.error(
-              `[routePrefetch]: route file resolve error, cannot prefetch for ${current.file}`,
+              `[routePrefetch]: route file resolve error, cannot preload for ${current.file}`,
             );
           }
           current = current.parentId && api.appData.routes[current.parentId];

packages/preset-umi/src/features/routePrefetch/utils.ts

@@ -0,0 +1,46 @@
+/**
+ * NOTE: DO NOT USE ADVANCED SYNTAX IN THIS FILE, TO AVOID INSERT HELPERS TO REDUCE SCRIPT SIZE.
+ */
+
+import type { IRouteChunkFilesMap } from './routePrefetch';
+
+interface IPreloadRouteFile {
+  type: 'js' | 'css' | unknown;
+  url: string;
+  attrs: ([string, string] | [string])[];
+}
+
+export const PRELOAD_ROUTE_MAP_SCP_TYPE = 'umi-route-chunk-files-map';
+
+export function getPreloadRouteFiles(
+  path: string,
+  map: IRouteChunkFilesMap,
+  opts: { publicPath: string },
+): IPreloadRouteFile[] | undefined {
+  const matched: IRouteChunkFilesMap['r'][string] | undefined =
+    // search for static route
+    map.r[path] ||
+    // search for dynamic route
+    Object.entries(map.r).find((p) => {
+      const route = p[0];
+      const reg = new RegExp(
+        // replace /:id to /[^/]+
+        // replace /* to /.+
+        `^${route.replace(/\/:[^/]+/g, '/[^/]+').replace('/*', '/.+')}$`,
+      );
+
+      return reg.test(path);
+    })?.[1];
+
+  return matched?.map((i) => {
+    const id = map.f[i][1];
+    const file = map.f[i][0];
+    const ext = file.split('.').pop();
+
+    return {
+      type: ext,
+      url: `${opts.publicPath}${file}`,
+      attrs: [[`data-${map.b}`, `${map.p}:${id}`]],
+    };
+  });
+}