feat: optimize js loading for streaming ssr (#7887)

Author: yimingjfe

packages/cli/builder/src/index.ts

@@ -31,6 +31,7 @@ export {
 
 export {
   RUNTIME_CHUNK_NAME,
+  RUNTIME_CHUNK_REGEX,
   SERVICE_WORKER_ENVIRONMENT_NAME,
   isHtmlDisabled,
   castArray,

packages/cli/builder/src/plugins/runtimeChunk.ts

@@ -1,5 +1,5 @@
 import type { RsbuildPlugin } from '@rsbuild/core';
-import { RUNTIME_CHUNK_NAME } from '../shared/utils';
+import { RUNTIME_CHUNK_NAME, RUNTIME_CHUNK_REGEX } from '../shared/utils';
 
 export const pluginRuntimeChunk = (
   disableInlineRuntimeChunk?: boolean,
@@ -30,12 +30,8 @@ export const pluginRuntimeChunk = (
         return;
       }
 
-      // RegExp like /bundler-runtime([.].+)?\.js$/
-      // matches bundler-runtime.js and bundler-runtime.123456.js
-      const regexp = new RegExp(`${RUNTIME_CHUNK_NAME}([.].+)?\\.js$`);
-
       if (!config.output.inlineScripts) {
-        config.output.inlineScripts = regexp;
+        config.output.inlineScripts = RUNTIME_CHUNK_REGEX;
       }
     });
   },

packages/cli/builder/src/shared/utils.ts

@@ -3,6 +3,11 @@ import browserslist from 'browserslist';
 
 export const RUNTIME_CHUNK_NAME = 'builder-runtime';
 
+// RegExp like /builder-runtime([.].+)?\.js$/
+export const RUNTIME_CHUNK_REGEX = new RegExp(
+  `${RUNTIME_CHUNK_NAME}([.].+)?\\.js$`,
+);
+
 export const SERVICE_WORKER_ENVIRONMENT_NAME = 'workerSSR';
 
 export const NODE_MODULES_REGEX = /[\\/]node_modules[\\/]/;

packages/solutions/app-tools/src/builder/shared/builderPlugins/adapterSSR.ts

@@ -29,7 +29,7 @@ export const builderPluginAdapterSSR = (
     api.modifyRsbuildConfig(config => {
       return mergeRsbuildConfig(config, {
         html: {
-          inject: isStreamingSSR(normalizedConfig) ? 'body' : undefined,
+          inject: isStreamingSSR(normalizedConfig) ? 'head' : undefined,
         },
         server: {
           // the http-compression can't handler stream http.

packages/solutions/app-tools/src/builder/shared/bundlerPlugins/HtmlAsyncChunkPlugin.ts

@@ -1,4 +1,5 @@
 import type { Rspack } from '@modern-js/builder';
+import { RUNTIME_CHUNK_REGEX } from '@modern-js/builder';
 
 export class HtmlAsyncChunkPlugin {
   name: string;
@@ -15,19 +16,37 @@ export class HtmlAsyncChunkPlugin {
       const hooks = this.htmlWebpackPlugin.getHooks(compilation as any);
 
       hooks.alterAssetTagGroups.tap(this.name, assets => {
-        const tags = [...assets.headTags, ...assets.bodyTags];
+        const headTags: typeof assets.headTags = [];
+        const bodyTags: typeof assets.bodyTags = [];
 
-        for (const tag of tags) {
+        const processScriptTag = (tag: (typeof assets.headTags)[0]) => {
+          const { attributes } = tag;
+
+          // Convert defer to async
+          if (attributes && attributes.defer === true) {
+            attributes.async = true;
+            delete attributes.defer;
+          }
+
+          const src = attributes?.src as string | undefined;
+          const isRuntimeChunk = src && RUNTIME_CHUNK_REGEX.test(src);
+
+          return isRuntimeChunk ? bodyTags : headTags;
+        };
+
+        for (const tag of [...assets.headTags, ...assets.bodyTags]) {
           if (tag.tagName === 'script') {
-            const { attributes } = tag;
-            if (attributes && attributes.defer === true) {
-              attributes.async = true;
-              delete attributes.defer;
-            }
+            processScriptTag(tag).push(tag);
+          } else {
+            (assets.headTags.includes(tag) ? headTags : bodyTags).push(tag);
           }
         }
 
-        return assets;
+        return {
+          ...assets,
+          headTags,
+          bodyTags,
+        };
       });
     });
   }