feat: add support for preloading of dynamic imported modules, #138

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.13.0 (2025-01-18)
+
+- feat: add support for preloading of dynamic imported modules, #138
+
 ## 4.12.3 (2025-01-18)
 
 - fix: output URL for preloaded resources if publicPath is a URL or root path, #141

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.12.3",
+  "version": "4.13.0",
   "description": "Generates complete single-page or multi-page website from source assets. Build-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",

src/Plugin/Collection.js

@@ -7,6 +7,8 @@ const Preload = require('./Preload');
 const { noHeadException } = require('./Messages/Exception');
 
 /** @typedef {import('webpack').Compilation} Compilation */
+/** @typedef {import("webpack/lib/Entrypoint")} Entrypoint */
+/** @typedef {import("webpack/lib/ChunkGroup")} ChunkGroup */
 
 /**
  * @typedef {Object} CollectionData
@@ -288,11 +290,13 @@ class Collection {
     for (let [resource, { type, name, entries }] of this.assets) {
       if (type !== Collection.type.script) continue;
 
+      /** @type {Entrypoint} entrypoint */
       const entrypoint = namedChunkGroups.get(name);
 
       // prevent error when in watch mode after removing a script in the template
       if (!entrypoint) continue;
 
+      const childrenFiles = this.#getChildrenFiles(entrypoint);
       const chunkFiles = new Set();
 
       for (const { id, files, auxiliaryFiles } of entrypoint.chunks) {
@@ -310,7 +314,7 @@ class Collection {
         splitChunkIds.add(id);
       }
 
-      const hasSplitChunks = chunkFiles.size > 1;
+      const hasChunks = chunkFiles.size > 1;
 
       // do flat the Map<string, Set>
       const entryFilenames = new Set();
@@ -322,16 +326,17 @@ class Collection {
         // let's show an original error
         if (!assets.hasOwnProperty(entryFile)) continue;
 
-        const data = { type, resource, chunks: [] };
+        const data = { type, resource, chunks: [], children: [] };
         let injectedChunks;
 
-        if (hasSplitChunks) {
+        if (hasChunks) {
           if (!chunkCache.has(entryFile)) chunkCache.set(entryFile, new Set());
           injectedChunks = chunkCache.get(entryFile);
         }
 
+        // split chunks
         for (let chunkFile of chunkFiles) {
-          if (hasSplitChunks) {
+          if (hasChunks) {
             if (injectedChunks.has(chunkFile)) continue;
             injectedChunks.add(chunkFile);
           }
@@ -343,6 +348,20 @@ class Collection {
           data.chunks.push({ inline, chunkFile, assetFile });
         }
 
+        // dynamic imported chunks
+        for (let chunkFile of childrenFiles) {
+          if (hasChunks) {
+            if (injectedChunks.has(chunkFile)) continue;
+            injectedChunks.add(chunkFile);
+          }
+
+          const assetFile = this.pluginOption.getAssetOutputFile(chunkFile, entryFile);
+          const inline = this.pluginOption.isInlineJs(resource, chunkFile);
+
+          splitChunkFiles.add(chunkFile);
+          data.children.push({ inline, chunkFile, assetFile });
+        }
+
         const entryData = this.data.get(entryFile);
 
         if (entryData) {
@@ -369,6 +388,24 @@ class Collection {
     }
   }
 
+  /**
+   * @param {Entrypoint} entrypoint
+   * @return {Array<string>}
+   */
+  #getChildrenFiles(entrypoint) {
+    let files = [];
+    const children = entrypoint.getChildren();
+
+    for (const chunkGroup of children) {
+      let chunkFiles = chunkGroup.getFiles();
+      if (chunkFiles) {
+        files.push(...chunkFiles);
+      }
+    }
+
+    return files;
+  }
+
   /**
    * Whether the output filename is a template entrypoint.
    *

src/Plugin/Messages/Info.js

@@ -69,7 +69,10 @@ const renderAssets = (item, pad = padLevel2) => {
   }
 
   if (type === Collection.type.script) {
-    const isSingleChunk = item.chunks.length === 1;
+    const chunks = item.chunks || [];
+    const children = item.children || [];
+    const files = [...chunks, ...children];
+    const isSingleChunk = files.length === 1;
     let li;
     let padLen;
 
@@ -80,7 +83,7 @@ const renderAssets = (item, pad = padLevel2) => {
       str += `${'->'.padStart(padLevel1)} ${fg(120)`chunks:`}` + '\n';
     }
 
-    for (let { inline, chunkFile, assetFile } of item.chunks) {
+    for (let { inline, chunkFile, assetFile } of files) {
       li = isSingleChunk ? '->' : '';
       if (inline) {
         str += `${li.padStart(padLen)} ${gray(path.basename(chunkFile))} ${yellow`(inline)`}\n`;

src/Plugin/Preload.js

@@ -154,6 +154,13 @@ class Preload {
           // css
           preloadAssets.set(item.assetFile, conf._opts);
         }
+
+        // dynamic imported modules
+        if (Array.isArray(item.children)) {
+          for (let { chunkFile, assetFile } of item.children) {
+            preloadAssets.set(assetFile, conf._opts);
+          }
+        }
       }
 
       // assets in css

test/cases/option-preload-dynamic-import/expected/css/style.0d25913e.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'OpenSans';
+  src: url(../fonts/open-sans-regular.woff2) format('woff2');
+  font-style: normal;
+}
+
+h1 {
+  color: orangered;
+}

test/cases/option-preload-dynamic-import/expected/fonts/open-sans-regular.woff2

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+    <link rel="preload" href="../js/main.8d41dc3e.js" as="script">
+    <link rel="preload" href="../js/module1.chunk.js" as="script">
+    <link rel="preload" href="../js/module2.chunk.js" as="script">
+    <link rel="preload" href="../css/style.0d25913e.css" as="style">
+    <link rel="preload" href="../fonts/open-sans-regular.woff2" as="font" type="font/woff2" crossorigin>
+    <link href="../css/style.0d25913e.css" rel="stylesheet">
+    <script src="../js/main.8d41dc3e.js" defer="defer"></script>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+  </body>
+</html>

test/cases/option-preload-dynamic-import/expected/home/index.html

@@ -0,0 +1 @@
+(self.webpackChunk=self.webpackChunk||[]).push([[364],{972:()=>{console.log(">> module-a")}}]);