fix: lazy import preload, then update include.type to include.as (#4589)

web-infra-dev · Sep 6, 2023 · f851fa9 · f851fa9
1 parent 57b861d
commit f851fa9
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 46 deletions.
diff --git a/.changeset/blue-pears-allow.md b/.changeset/blue-pears-allow.md
@@ -0,0 +1,7 @@
+---
+'@modern-js/prod-server': patch
+'@modern-js/server-core': patch
+---
+
+fix: lazy import preload, then update include.type to include.as
+fix: 动态加载 preload 功能, 对齐规范将 include.type 属性更新为 include.as
diff --git a/packages/server/core/src/types/config/server.ts b/packages/server/core/src/types/config/server.ts
@@ -11,9 +11,8 @@ type Route =
     };
 export type Routes = Record<string, Route>;
 
-type PreloadInclude = Array<
-  string | { url: string; type?: string; rel?: string }
->;
+type PreloadLink = { url: string; as?: string; rel?: string };
+type PreloadInclude = Array<string | PreloadLink>;
 interface PreloadAttributes {
   script?: Record<string, boolean | string>;
   style?: Record<string, boolean | string>;

diff --git a/packages/server/prod-server/src/libs/preload/flushServerHeader.ts b/packages/server/prod-server/src/libs/preload/flushServerHeader.ts
@@ -4,41 +4,6 @@ import { ModernServerContext } from '@modern-js/types';
 import { parseLinks } from './parseLinks';
 import { transformLinks2String } from './transformLinks2String';
 
-export function transformToRegExp(input: string | RegExp): RegExp {
-  if (typeof input === 'string') {
-    return new RegExp(input);
-  }
-  return input;
-}
-
-export function shouldFlushServerHeader(
-  serverConf: ServerOptions['server'],
-  userAgent?: string,
-  disablePreload?: boolean,
-) {
-  const { ssr: ssrConf } = serverConf || {};
-
-  if (disablePreload) {
-    return false;
-  }
-
-  if (typeof ssrConf === 'object' && ssrConf.preload) {
-    // ssr.preload: 'object'
-    if (typeof ssrConf.preload === 'object') {
-      const { userAgentFilter } = ssrConf.preload;
-      if (userAgentFilter && userAgent) {
-        return !transformToRegExp(userAgentFilter).test(userAgent);
-      }
-      return true;
-    }
-    // ssr.preload: true;
-    return true;
-  }
-
-  // ssr: false or ssr: true
-  return false;
-}
-
 export interface FlushServerHeaderOptions {
   ctx: ModernServerContext;
   distDir: string;

diff --git a/packages/server/prod-server/src/libs/preload/shouldFlushServerHeader.ts b/packages/server/prod-server/src/libs/preload/shouldFlushServerHeader.ts
@@ -0,0 +1,36 @@
+import type { ServerOptions } from '@modern-js/server-core';
+
+export function transformToRegExp(input: string | RegExp): RegExp {
+  if (typeof input === 'string') {
+    return new RegExp(input);
+  }
+  return input;
+}
+
+export function shouldFlushServerHeader(
+  serverConf: ServerOptions['server'],
+  userAgent?: string,
+  disablePreload?: boolean,
+) {
+  const { ssr: ssrConf } = serverConf || {};
+
+  if (disablePreload) {
+    return false;
+  }
+
+  if (typeof ssrConf === 'object' && ssrConf.preload) {
+    // ssr.preload: 'object'
+    if (typeof ssrConf.preload === 'object') {
+      const { userAgentFilter } = ssrConf.preload;
+      if (userAgentFilter && userAgent) {
+        return !transformToRegExp(userAgentFilter).test(userAgent);
+      }
+      return true;
+    }
+    // ssr.preload: true;
+    return true;
+  }
+
+  // ssr: false or ssr: true
+  return false;
+}
diff --git a/packages/server/prod-server/src/libs/preload/transformLinks2String.ts b/packages/server/prod-server/src/libs/preload/transformLinks2String.ts
@@ -1,6 +1,6 @@
 import { SSRPreload } from '@modern-js/server-core';
 import { Link } from './parseLinks';
-import { transformToRegExp } from './flushServerHeader';
+import { transformToRegExp } from './shouldFlushServerHeader';
 
 export function transformLinks2String(
   links: Link[],
@@ -62,7 +62,7 @@ function addInclude(links: Link[], include?: SSRPreload['include']) {
         })();
         return { uri: item, as: type };
       }
-      return { uri: item.url, as: item.type, rel: item.rel };
+      return { uri: item.url, as: item.as, rel: item.rel };
     }) || [];
 
   return links.concat(includes);

diff --git a/packages/server/prod-server/src/libs/render/index.ts b/packages/server/prod-server/src/libs/render/index.ts
@@ -5,7 +5,7 @@ import { ServerOptions } from '@modern-js/server-core';
 import { RenderResult, ServerHookRunner } from '../../type';
 import { ModernRoute } from '../route';
 import { ERROR_DIGEST } from '../../constants';
-import { flushServerHeader, shouldFlushServerHeader } from '../preload';
+import { shouldFlushServerHeader } from '../preload/shouldFlushServerHeader';
 import { handleDirectory } from './static';
 import { readFile } from './reader';
 import * as ssr from './ssr';
@@ -84,7 +84,9 @@ export const createRenderHandler: CreateRenderHandler = ({
         const disablePreload = Boolean(
           ctx.headers[`x-${cutNameByHyphen(metaName)}-disable-preload`],
         );
+
         if (shouldFlushServerHeader(conf.server, userAgent, disablePreload)) {
+          const { flushServerHeader } = await import('../preload');
           flushServerHeader({
             serverConf: conf.server,
             ctx,

diff --git a/packages/server/prod-server/tests/preload.test.ts b/packages/server/prod-server/tests/preload.test.ts
@@ -3,10 +3,10 @@ import type { ServerOptions } from '@modern-js/server-core';
 import { fs } from '@modern-js/utils';
 import {
   flushServerHeader,
-  shouldFlushServerHeader,
-  parseLinks,
   FlushServerHeaderOptions,
+  parseLinks,
 } from '../src/libs/preload';
+import { shouldFlushServerHeader } from '../src/libs/preload/shouldFlushServerHeader';
 
 describe('test preload', () => {
   const distDir = path.join(__dirname, 'fixtures', 'preload');
@@ -121,8 +121,8 @@ describe('test preload', () => {
         ssr: {
           preload: {
             include: [
-              { url: 'http://example.com', type: 'script' },
-              { url: 'http://example.com', type: 'script' },
+              { url: 'http://example.com', as: 'script' },
+              { url: 'http://example.com', as: 'script' },
               {
                 url: 'http://example3.com',
                 rel: 'dns-prefetch',

diff --git a/tests/integration/ssr/fixtures/preload/modern.config.ts b/tests/integration/ssr/fixtures/preload/modern.config.ts
@@ -3,7 +3,14 @@ import { appTools, defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   server: {
     ssr: {
-      preload: true,
+      preload: {
+        include: [
+          {
+            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvshpqnulg/eden-x-logo.png',
+            as: 'image',
+          },
+        ],
+      },
     },
   },
   runtime: {

diff --git a/tests/integration/ssr/tests/__snapshots__/preload.test.ts.snap b/tests/integration/ssr/tests/__snapshots__/preload.test.ts.snap
@@ -9,5 +9,6 @@ exports[`SSR preload should add Links to response headers 1`] = `
   "</static/js/lib-react.js>; rel=preload; as=script",
   "</static/js/lib-router.js>; rel=preload; as=script",
   "</static/js/main.js>; rel=preload; as=script",
+  "<https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvshpqnulg/eden-x-logo.png>; rel=preload; as=image",
 ]
 `;