add preload for js and css files

Author: Idrinth

README.md

@@ -40,6 +40,7 @@ interface Configuration {
     buildIndex?: boolean,
     minifyPages?: boolean,
     appendPageChunk?: boolean,
+    preLoadCSS?: boolean,
   },
   fileFinder?: {
     fileName?: string,

package-lock.json

@@ -25,6 +25,8 @@ interface FileBuilder {
   buildIndex: boolean,
   minifyPages: boolean,
   appendPageChunk: boolean,
+  preLoadCSS: boolean,
+  preLoadJS: boolean,
 }
 interface FileFinder {
   fileName: string,
@@ -76,6 +78,8 @@ export default (cwd: string, cliArguments: string[]): Configuration => {
       buildIndex: true,
       minifyPages: true,
       appendPageChunk: true,
+      preLoadCSS: true,
+      preLoadJS: true,
     },
   };
   const configFile = cwd + '/.idrinth-react-file-based-routes.json';

src/configuration.ts

@@ -16,18 +16,35 @@ export default (cwd: string, configuration: Configuration) => {
   })();
   const matcher = new RegExp(`${configuration.fileFinder.distJSRoot}/(.*?)${configuration.fileFinder.fileName}`);
   const fileName = configuration.fileFinder.fileName.replace(/\.tsx$/, '-');
+  const cssFiles = [];
+  const jsFiles = [];
+  const files = readdirSync(cwd + '/' + configuration.fileFinder.distJSRoot, {encoding: 'utf8', recursive: true});
+  if (configuration.fileBuilder.preLoadCSS) {
+    for (const file of files) {
+      if (file.endsWith('.css',)) {
+        cssFiles.push(file,);
+      }
+    }
+  }
+  if (configuration.fileBuilder.preLoadJS) {
+    for (const file of files) {
+      if (file.endsWith('.js',)) {
+        jsFiles.push(file,);
+      }
+    }
+  }
 
-  for (const file of readdirSync(cwd + '/' + configuration.fileFinder.distJSRoot, {encoding: 'utf8', recursive: true})) {
+  for (const file of files) {
     if (file.endsWith('.js') && file.startsWith(fileName)) {
       const content = readFileSync(cwd + '/' + configuration.fileFinder.distJSRoot + '/' + file, 'utf8',);
       const res = matcher.exec(content);
       if (res && res[1]) {
         if (typeof configuration.routes.overridePathMappings[res[1]] === 'string') {
           if (configuration.routes.overridePathMappings[res[1]] !== '*') {
-            writeIndexHtml(cwd, file, configuration.routes.overridePathMappings[res[1]], template, configuration);
+            writeIndexHtml(cwd, file, configuration.routes.overridePathMappings[res[1]], template, configuration, cssFiles, jsFiles);
           }
         } else {
-          writeIndexHtml(cwd, file, `/${ res[1] }/`, template, configuration);
+          writeIndexHtml(cwd, file, `/${ res[1] }/`, template, configuration, cssFiles, jsFiles);
         }
       }
     }

src/generate-folders.ts

@@ -1,18 +1,37 @@
 import {Configuration} from './configuration.js';
 import {mkdirSync, writeFileSync} from 'fs';
 
-export default (cwd: string, jsFile: string, path: string, template: string, configuration: Configuration) => {
+export default (cwd: string, jsFile: string, path: string, template: string, configuration: Configuration, cssPreload: string[], jsPreload: string[]) => {
   if (!configuration.fileBuilder.buildIndex) {
     return;
   }
+  let preload = '';
+  for (const css of cssPreload) {
+    preload += `<link rel="preload" href="/assets/${ css }" as="style" type="text/css"/>`
+  }
+  for (const js of jsPreload) {
+    if (! configuration.fileBuilder.appendPageChunk || js !== jsFile) {
+      preload += `<link rel="preload" href="/assets/${js}" as="script" type="text/javascript"/>`;
+    }
+  }
   const target = cwd + '/dist' + path + 'index.html';
   mkdirSync('./dist' + path, {recursive: true},);
   if (! configuration.fileBuilder.appendPageChunk) {
+    if (preload.length > 0) {
+      writeFileSync(
+        target,
+        template.replace(/<\/head>/, `${ preload }</head>`),
+      );
+      return;
+    }
     writeFileSync(target, template,);
     return;
   }
   writeFileSync(
     target,
-    template.replace(/<\/head>/, `<script src="/assets/${jsFile}" type="module"></script></head>`),
+    template.replace(
+      /<\/head>/,
+      `<script src="/assets/${jsFile}" type="module"></script>${ preload }</head>`,
+    ),
   );
 }