fix: ssr script、link should add some attrs, like ["defer", "crossorig…

…in"] (#4000) * fix: ssr script should add some attrs * docs: add changeset
web-infra-dev · Jun 19, 2023 · 56693a3 · 56693a3
1 parent 36f5bdf
commit 56693a3
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git a/.changeset/strange-walls-unite.md b/.changeset/strange-walls-unite.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/runtime': patch
+---
+
+fix(plugin-ssr): ssr script、link should add some attrs, like ["defer", "crossorigin"]
+fix(plugin-ssr): ssr script,link 标签应该添加像 ["defer", "crossorigin"] 属性
diff --git a/packages/runtime/plugin-runtime/src/ssr/cli/index.ts b/packages/runtime/plugin-runtime/src/ssr/cli/index.ts
@@ -189,10 +189,15 @@ export default (): CliPlugin<AppTools> => ({
           const chunkLoadingGlobal = bundlerConfigs?.find(
             config => config.name === 'client',
           )?.output?.chunkLoadingGlobal;
+          const config = api.useResolvedConfigContext();
+          const { crossorigin, scriptLoading } = config.html;
+
           plugins.push({
             name: PLUGIN_IDENTIFIER,
             options: JSON.stringify({
               ...(ssrConfigMap.get(entrypoint.entryName) || {}),
+              crossorigin,
+              scriptLoading,
               chunkLoadingGlobal,
             }),
           });

diff --git a/packages/runtime/plugin-runtime/src/ssr/serverRender/renderToString/loadable.ts b/packages/runtime/plugin-runtime/src/ssr/serverRender/renderToString/loadable.ts
@@ -35,18 +35,31 @@ export const toHtml: RenderHandler = (jsx, renderer, next) => {
 
   for (const v of chunks) {
     const fileType = extname(v.url!).slice(1);
+    const attributes: Record<string, any> = {};
+    const { crossorigin, scriptLoading = 'defer' } = config;
+    if (crossorigin && isCrossOrigin(v.url, host)) {
+      attributes.crossorigin = crossorigin === true ? 'anonymous' : crossorigin;
+    }
+
+    switch (scriptLoading) {
+      case 'defer':
+        attributes.defer = true;
+        break;
+      case 'module':
+        attributes.type = 'module';
+        break;
+      default:
+    }
 
     if (fileType === 'js') {
-      const attributes: Record<string, any> = { nonce };
-      const { crossorigin } = config;
-      if (crossorigin && isCrossOrigin(v.url, host)) {
-        attributes.crossorigin =
-          crossorigin === true ? 'anonymous' : crossorigin;
-      }
+      // `nonce` attrs just for script tag
+      attributes.nonce = nonce;
       const attrsStr = attributesToString(attributes);
       chunksMap[fileType] += `<script${attrsStr} src="${v.url}"></script>`;
     } else if (fileType === 'css') {
-      chunksMap[fileType] += `<link href="${v.url}" rel="stylesheet" />`;
+      chunksMap[
+        fileType
+      ] += `<link${attributes} href="${v.url}" rel="stylesheet" />`;
     }
   }
 

diff --git a/packages/runtime/plugin-runtime/src/ssr/serverRender/types.ts b/packages/runtime/plugin-runtime/src/ssr/serverRender/types.ts
@@ -8,6 +8,7 @@ export { RuntimeContext, RenderLevel };
 
 export type SSRPluginConfig = {
   crossorigin?: boolean | 'anonymous' | 'use-credentials';
+  scriptLoading?: 'defer' | 'blocking' | 'module';
   chunkLoadingGlobal?: string;
 } & Exclude<ServerUserConfig['ssr'], boolean>;