perf: defer application main JS chunks (#3619)

* perf: defer main application JS chunks * docs: changeset --------- Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>
commercetools · Oct 8, 2024 · 5d55a50 · 5d55a50
1 parent e27a447
commit 5d55a50
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/.changeset/serious-trainers-cough.md 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
@@ -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
@@ -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
@@ -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
@@ -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.