refactor: change route preonload inline to ref

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

@@ -3,12 +3,13 @@ import type {
   StatsCompilation,
 } from '@umijs/bundler-webpack/compiled/webpack';
 import { lodash, logger, winPath } from '@umijs/utils';
-import { readFileSync } from 'fs';
+import { createHash } from 'crypto';
+import { readFileSync, writeFileSync } from 'fs';
 import { dirname, isAbsolute, join, relative } from 'path';
 import { TEMPLATES_DIR } from '../../constants';
 import { createResolver } from '../../libs/scan';
 import type { IApi, IRoute } from '../../types';
-import { PRELOAD_ROUTE_MAP_SCP_TYPE } from './utils';
+import { PRELOAD_ROUTE_HELPER, PRELOAD_ROUTE_MAP_SCP_TYPE } from './utils';
 
 export interface IRouteChunkFilesMap {
   /**
@@ -205,7 +206,7 @@ async function getRoutePathFilesMap(
 
 export default (api: IApi) => {
   let routeChunkFilesMap: IRouteChunkFilesMap;
-
+  let hash = '';
   api.describe({
     enableBy: () =>
       // enable when package name available
@@ -222,6 +223,9 @@ export default (api: IApi) => {
   api.addHTMLHeadScripts({
     fn: () => {
       if (api.name === 'build' && routeChunkFilesMap) {
+        const { publicPath } = api.config;
+        const hashedPart = hash ? `.${hash}.js` : '.js';
+        const displayPublicPath = publicPath === 'auto' ? '/' : publicPath;
         // internal tern app use map mode
         return api.config.tern
           ? // map mode
@@ -234,29 +238,11 @@ export default (api: IApi) => {
           : // script mode
             [
               {
-                content: readFileSync(
-                  join(
-                    TEMPLATES_DIR,
-                    'routePreloadOnLoad/preloadRouteFilesScp.js',
-                  ),
-                  'utf-8',
-                )
-                  .replace(
-                    '"{{routeChunkFilesMap}}"',
-                    JSON.stringify(routeChunkFilesMap),
-                  )
-                  .replace('{{basename}}', api.config.base)
-                  .replace(
-                    '"{{publicPath}}"',
-                    `${
-                      // handle runtimePublicPath
-                      api.config.runtimePublicPath ? 'window.publicPath||' : ''
-                    }"${api.config.publicPath}"`,
-                  ),
+                src: `${displayPublicPath}${PRELOAD_ROUTE_HELPER}${hashedPart}`,
               },
             ];
       }
-  
+
       return [];
     },
     stage: Infinity,
@@ -306,6 +292,35 @@ export default (api: IApi) => {
             .value() as any,
         };
       }
+      if (api.name === 'build' && routeChunkFilesMap && !api.config.tern) {
+        const content = readFileSync(
+          join(TEMPLATES_DIR, 'routePreloadOnLoad/preloadRouteFilesScp.js'),
+          'utf-8',
+        )
+          .replace(
+            '"{{routeChunkFilesMap}}"',
+            JSON.stringify(routeChunkFilesMap),
+          )
+          .replace('{{basename}}', api.config.base)
+          .replace(
+            '"{{publicPath}}"',
+            `${
+              // handle runtimePublicPath
+              api.config.runtimePublicPath ? 'window.publicPath||' : ''
+            }"${api.config.publicPath}"`,
+          );
+        if (api.config.hash) {
+          hash = createHash('md5')
+            .update(content)
+            .digest('hex')
+            .substring(0, 8);
+        }
+        writeFileSync(
+          join(api.paths.absOutputPath, `${PRELOAD_ROUTE_MAP_SCP_TYPE}.js`),
+          content,
+        ),
+          'utf-8';
+      }
     }
   });
 };

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

@@ -13,6 +13,7 @@ export interface IPreloadRouteFile {
 }
 
 export const PRELOAD_ROUTE_MAP_SCP_TYPE = 'umi-route-chunk-files-map';
+export const PRELOAD_ROUTE_HELPER = '_umi_route_preload_helper';
 
 export function getPreloadRouteFiles(
   path: string,