[#264] Adapt fixWebpackChunksIssue for CRAv2

x# Please enter the commit message for your changes. Lines starting

index.js

@@ -46,6 +46,7 @@ const defaultOptions = {
   },
   sourceMaps: true,
   //# workarounds
+  // TODO: use false, CRAv2 and CRAv1 (instead of true)
   fixWebpackChunksIssue: true,
   removeBlobs: true,
   fixInsertRule: true,
@@ -368,7 +369,7 @@ const asyncScriptTags = ({ page }) => {
   });
 };
 
-const fixWebpackChunksIssue = ({
+const fixWebpackChunksIssuev1 = ({
   page,
   basePath,
   http2PushManifest,
@@ -379,7 +380,7 @@ const fixWebpackChunksIssue = ({
       const localScripts = Array.from(document.scripts).filter(
         x => x.src && x.src.startsWith(basePath)
       );
-      // CRA v1|v2
+      // CRA v1|v2.alpha
       const mainRegexp = /main\.[\w]{8}.js|main\.[\w]{8}\.chunk\.js/;
       const mainScript = localScripts.find(x => mainRegexp.test(x.src));
       const firstStyle = document.querySelector("style");
@@ -429,6 +430,76 @@ const fixWebpackChunksIssue = ({
   );
 };
 
+const fixWebpackChunksIssuev2 = ({
+  page,
+  basePath,
+  http2PushManifest,
+  inlineCss
+}) => {
+  return page.evaluate(
+    (basePath, http2PushManifest, inlineCss) => {
+      const localScripts = Array.from(document.scripts).filter(
+        x => x.src && x.src.startsWith(basePath)
+      );
+      // CRA v2
+      const mainRegexp = /main\.[\w]{8}\.chunk\.js/;
+      const mainScript = localScripts.find(x => mainRegexp.test(x.src));
+      const firstStyle = document.querySelector("style");
+
+      if (!mainScript) return;
+
+      const chunkRegexp = /(\w+)\.[\w]{8}\.chunk\.js/g;
+
+      const headScripts = Array.from(document.querySelectorAll("head script"))
+        .filter(x => x.src && x.src.startsWith(basePath))
+        .filter(x => {
+          const matched = chunkRegexp.exec(x.src);
+          // we need to reset state of RegExp https://stackoverflow.com/a/11477448
+          chunkRegexp.lastIndex = 0;
+          return matched;
+        });
+
+      const chunkScripts = localScripts.filter(x => {
+        const matched = chunkRegexp.exec(x.src);
+        // we need to reset state of RegExp https://stackoverflow.com/a/11477448
+        chunkRegexp.lastIndex = 0;
+        return matched;
+      });
+
+      const createLink = x => {
+        if (http2PushManifest) return;
+        const linkTag = document.createElement("link");
+        linkTag.setAttribute("rel", "preload");
+        linkTag.setAttribute("as", "script");
+        linkTag.setAttribute("href", x.src.replace(basePath, ""));
+        if (inlineCss) {
+          firstStyle.parentNode.insertBefore(linkTag, firstStyle);
+        } else {
+          document.head.appendChild(linkTag);
+        }
+      };
+
+      for (let i = headScripts.length; i <= chunkScripts.length - 1; i++) {
+        const x = chunkScripts[i];
+        if (x.parentElement && mainScript.parentNode) {
+          createLink(x);
+        }
+      }
+
+      for (let i = headScripts.length - 1; i >= 0; --i) {
+        const x = headScripts[i];
+        if (x.parentElement && mainScript.parentNode) {
+          x.parentElement.removeChild(x);
+          createLink(x);
+        }
+      }
+    },
+    basePath,
+    http2PushManifest,
+    inlineCss
+  );
+};
+
 const fixInsertRule = ({ page }) => {
   return page.evaluate(() => {
     Array.from(document.querySelectorAll("style")).forEach(style => {
@@ -548,15 +619,15 @@ const run = async (userOptions, { fs } = { fs: nativeFs }) => {
     return Promise.reject("");
   }
 
-  fs.createReadStream(path.join(sourceDir, "index.html")).pipe(
-    fs.createWriteStream(path.join(sourceDir, "200.html"))
-  );
+  fs
+    .createReadStream(path.join(sourceDir, "index.html"))
+    .pipe(fs.createWriteStream(path.join(sourceDir, "200.html")));
 
   if (destinationDir !== sourceDir && options.saveAs === "html") {
     mkdirp.sync(destinationDir);
-    fs.createReadStream(path.join(sourceDir, "index.html")).pipe(
-      fs.createWriteStream(path.join(destinationDir, "200.html"))
-    );
+    fs
+      .createReadStream(path.join(sourceDir, "index.html"))
+      .pipe(fs.createWriteStream(path.join(destinationDir, "200.html")));
   }
 
   const server = options.externalServer ? null : startServer(options);
@@ -628,8 +699,15 @@ const run = async (userOptions, { fs } = { fs: nativeFs }) => {
           }
         }
       }
-      if (options.fixWebpackChunksIssue) {
-        await fixWebpackChunksIssue({
+      if (options.fixWebpackChunksIssue === "CRAv2") {
+        await fixWebpackChunksIssuev2({
+          page,
+          basePath,
+          http2PushManifest,
+          inlineCss: options.inlineCss
+        });
+      } else if (options.fixWebpackChunksIssue) {
+        await fixWebpackChunksIssuev1({
           page,
           basePath,
           http2PushManifest,