@rollup-extras/plugin-html 2.0.1 → 2.1.0

package/README.md

@@ -108,6 +108,12 @@ Optional, boolean, default: undefined.
 
 Defines if the plugin adds `nomodule` attributes for non-modular js chunks. By default, it is done only if we have an `es` output in one of the bundles processed by the plugin. Also plugin values `iife` outputs higher than `umd` and if we have both filters out `umd` ones. This can be changed only by providing a custom `assetFactory`.
 
+### modulepreload
+
+Optional, boolean, default: true.
+
+When enabled and the output format is `es`, the plugin automatically injects `<link rel="modulepreload">` tags into `<head>` for all static dependencies (including transitive ones) of each entry chunk. This eliminates the browser's sequential module discovery waterfall, allowing all chunks to be fetched in parallel as soon as the HTML is parsed.
+
 ### injectIntoHead
 
 Optional, RegExp | function | boolean, default: `(fileName: string) => fileName.endsWith(cssExtention)`.

package/index.d.ts

@@ -33,6 +33,7 @@ declare module '@rollup-extras/plugin-html' {
 		useWriteBundle?: boolean;
 		useEmittedTemplate?: boolean;
 		conditionalLoading?: boolean;
+		modulepreload?: boolean;
 		injectIntoHead?: PredicateSource;
 		ignore?: PredicateSource;
 		assetsFactory?: AssetFactory;

package/index.d.ts.map

@@ -26,6 +26,6 @@
 		null,
 		null
 	],
-	"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCQgBW,eAAeA;;iBASfC,uBAAuBA;;iBASvBC,kBAAkBA;;iBASlBC,qBAAqBA;;;;;;;;",
+	"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCQgBW,eAAeA;;iBASfC,uBAAuBA;;iBASvBC,kBAAkBA;;iBASlBC,qBAAqBA;;;;;;;;",
 	"ignoreList": []
 }

package/index.js

@@ -7,7 +7,7 @@ import logger from '@rollup-extras/utils/logger';
 import { multiConfigPluginBase } from '@rollup-extras/utils/multi-config-plugin-base';
 import { getOptionsObject } from '@rollup-extras/utils/options';
 
-import { getLinkElement, getModuleScriptElement, getNonModuleScriptElement, toAssetPredicate } from './shared.js';
+import { getLinkElement, getModulePreloadElement, getModuleScriptElement, getNonModuleScriptElement, toAssetPredicate } from './shared.js';
 
 const defaultTemplate = '<!DOCTYPE html><html><head></head><body></body></html>';
 const headClosingElement = '</head>';
@@ -20,6 +20,7 @@ const defaults = {
     watch: true,
     useWriteBundle: false,
     emitFile: 'auto',
+    modulepreload: true,
     injectIntoHead:  (( fileName) => fileName.endsWith(cssExtention)),
     ignore:  (toAssetPredicate(false)),
     templateFactory:  (
@@ -42,6 +43,7 @@ export default function (options = {}) {
             watch,
             emitFile,
             conditionalLoading,
+            modulepreload,
             logger,
             useWriteBundle,
             logLevel,
@@ -280,6 +282,17 @@ export default function (options = {}) {
                             type: 'asset',
                         });
                     }
+                    if (modulepreload && options.format === 'es') {
+                        const transitiveImports = collectTransitiveImports(bundle, fileName);
+                        for (const importFileName of transitiveImports) {
+                            const importAssetPath = relative(initialDir, join(dir, importFileName));
+                             (assets.asset).push({
+                                html: getModulePreloadElement(importAssetPath),
+                                head: true,
+                                type: 'asset',
+                            });
+                        }
+                    }
                 }
             }
         }
@@ -345,3 +358,23 @@ function defaultTemplateFactory(template, assets) {
     const bodyIndex = template.toLowerCase().indexOf(bodyClosingElement);
     return `${template.substring(0, bodyIndex)}${bodyElements.join('')}${template.substring(bodyIndex)}`;
 }
+
+function collectTransitiveImports(bundle, entryFileName) {
+
+    const collected = new Set();
+
+    const queue = [... (bundle[entryFileName]).imports];
+    while (queue.length > 0) {
+        const importFileName =  (queue.pop());
+
+        if (collected.has(importFileName)) {
+            continue;
+        }
+        collected.add(importFileName);
+        const chunk = bundle[importFileName];
+        if (chunk?.type === 'chunk') {
+            queue.push(...chunk.imports);
+        }
+    }
+    return collected;
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.1",
+  "version": "2.1.0",
   "license": "MIT",
   "name": "@rollup-extras/plugin-html",
   "author": "Konstantin Shutkin",

package/shared.js

@@ -10,6 +10,10 @@ export function getModuleScriptElement(fileName) {
     return `<script src="${fileName}" type="module"></script>`;
 }
 
+export function getModulePreloadElement(fileName) {
+    return `<link rel="modulepreload" href="${fileName}">`;
+}
+
 export function toAssetPredicate(sourceOption) {
     if (typeof sourceOption === 'boolean') {
         return () => sourceOption;