From 5d55a5033e01ca86da879ad58701b4737439bc45 Mon Sep 17 00:00:00 2001
From: Rafa Gares <13467563+ragafus@users.noreply.github.com>
Date: Tue, 8 Oct 2024 10:00:45 +0200
Subject: [PATCH] perf: defer application main JS chunks (#3619)

* perf: defer main application JS chunks

* docs: changeset

---------

Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>
---
 .changeset/serious-trainers-cough.md                   | 6 ++++++
 packages/mc-html-template/html-docs/application.html   | 6 +++---
 packages/mc-html-template/src/webpack-html-template.ts | 2 +-
 packages/mc-scripts/src/commands/build-vite.ts         | 4 +++-
 packages/mc-scripts/src/commands/start-vite.ts         | 2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/serious-trainers-cough.md

diff --git a/.changeset/serious-trainers-cough.md b/.changeset/serious-trainers-cough.md
new file mode 100644
index 0000000000..c34ce1df7a
--- /dev/null
+++ b/.changeset/serious-trainers-cough.md
@@ -0,0 +1,6 @@
+---
+"@commercetools-frontend/mc-html-template": patch
+"@commercetools-frontend/mc-scripts": patch
+---
+
+Use `defer` when loading main application JavaScript chunks.
diff --git a/packages/mc-html-template/html-docs/application.html b/packages/mc-html-template/html-docs/application.html
index 139c8da5b2..1ec683336e 100644
--- a/packages/mc-html-template/html-docs/application.html
+++ b/packages/mc-html-template/html-docs/application.html
@@ -55,6 +55,9 @@
       href="__CDN_URL__favicon_144x144px.png"
     />
 
+    <!-- Main application chunks -->
+    __APPLICATION_SCRIPT_IMPORTS__
+
     <!-- Fonts -->
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap"
@@ -167,8 +170,5 @@
 
     <!-- Application globals -->
     __APPLICATION_ENVIRONMENT__
-
-    <!-- Main application chunks -->
-    __APPLICATION_SCRIPT_IMPORTS__
   </body>
 </html>
diff --git a/packages/mc-html-template/src/webpack-html-template.ts b/packages/mc-html-template/src/webpack-html-template.ts
index 3eabcf7d29..cf46cb2016 100644
--- a/packages/mc-html-template/src/webpack-html-template.ts
+++ b/packages/mc-html-template/src/webpack-html-template.ts
@@ -30,7 +30,7 @@ function webpackHtmlTemplate(templateParams: TemplateParameter) {
       `<link href="__CDN_URL__${chunkPath}" rel='stylesheet' type='text/css'>`
   );
   const scriptImports = scriptChunks.map(
-    (chunkPath) => `<script src="__CDN_URL__${chunkPath}"></script>`
+    (chunkPath) => `<script src="__CDN_URL__${chunkPath}" defer></script>`
   );
 
   return generateTemplate({ cssImports, scriptImports });
diff --git a/packages/mc-scripts/src/commands/build-vite.ts b/packages/mc-scripts/src/commands/build-vite.ts
index 7f696233bd..77822ded9b 100644
--- a/packages/mc-scripts/src/commands/build-vite.ts
+++ b/packages/mc-scripts/src/commands/build-vite.ts
@@ -21,7 +21,9 @@ async function run() {
   const html = generateTemplate({
     // Define the module entry point (path relative from the `/public` folder).
     // NOTE: that this is different from the development configuration.
-    scriptImports: [`<script type="module" src="/${appEntryPoint}"></script>`],
+    scriptImports: [
+      `<script type="module" src="/${appEntryPoint}" defer></script>`,
+    ],
   });
   // Write `index.html` (template) into the `/public` folder.
   fs.writeFileSync(paths.appIndexHtml, html, { encoding: 'utf8' });
diff --git a/packages/mc-scripts/src/commands/start-vite.ts b/packages/mc-scripts/src/commands/start-vite.ts
index 0035c9a1c0..53774b6c9d 100644
--- a/packages/mc-scripts/src/commands/start-vite.ts
+++ b/packages/mc-scripts/src/commands/start-vite.ts
@@ -25,7 +25,7 @@ async function run() {
     // Define the module entry point (path relative to the `/public` folder).
     // NOTE: that this is different from the production configuration.
     scriptImports: [
-      `<script type="module" src="/../${appEntryPoint}"></script>`,
+      `<script type="module" src="/../${appEntryPoint}" defer></script>`,
     ],
   });
   // Write `index.html` (template) into the `/public` folder.