Merge pull request #1 from TheRoadyBuddha/master

merge fix

Author: utlime

README.md

@@ -529,6 +529,13 @@ module.exports = {
 
 For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.
 
+#### rel="preload" support
+
+On browsers that support `<link rel="preload" as="style">`, then CSS links will be preloaded by default.
+This is both to improve page load performance, and addresess Chrome Lighthouse SEO performance audits requiring the use of rel="preload" with asynchronous chunks.
+
+-[Lighthouse article](https://developers.google.com/web/tools/lighthouse/audits/preload)
+
 **webpack.config.js**
 
 ```js

src/index.js

@@ -321,10 +321,13 @@ class MiniCssExtractPlugin {
               }
             );
 
+            const supportsPreload =
+              '(function() { try { return document.createElement("link").relList.supports("preload"); } catch(e) { return false; }}());';
             return Template.asString([
               source,
               '',
               `// ${pluginName} CSS loading`,
+              `var supportsPreload = ${supportsPreload}`,
               `var cssChunks = ${JSON.stringify(chunkMap)};`,
               'if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);',
               'else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {',
@@ -338,7 +341,7 @@ class MiniCssExtractPlugin {
                   Template.indent([
                     'var tag = existingLinkTags[i];',
                     'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");',
-                    'if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();',
+                    'if((tag.rel === "stylesheet" || tag.rel === "preload") && (dataHref === href || dataHref === fullhref)) return resolve();',
                   ]),
                   '}',
                   'var existingStyleTags = document.getElementsByTagName("style");',
@@ -350,8 +353,8 @@ class MiniCssExtractPlugin {
                   ]),
                   '}',
                   'var linkTag = document.createElement("link");',
-                  'linkTag.rel = "stylesheet";',
-                  'linkTag.type = "text/css";',
+                  'linkTag.rel = supportsPreload ? "preload": "stylesheet";',
+                  'supportsPreload ? linkTag.as = "style" : linkTag.type = "text/css";',
                   'linkTag.onload = resolve;',
                   'linkTag.onerror = function(event) {',
                   Template.indent([
@@ -380,7 +383,18 @@ class MiniCssExtractPlugin {
                   'head.appendChild(linkTag);',
                 ]),
                 '}).then(function() {',
-                Template.indent(['installedCssChunks[chunkId] = 0;']),
+                Template.indent([
+                  'installedCssChunks[chunkId] = 0;',
+                  'if(supportsPreload) {',
+                  Template.indent([
+                    'var execLinkTag = document.createElement("link");',
+                    `execLinkTag.href =  ${mainTemplate.requireFn}.p + ${linkHrefPath};`,
+                    'execLinkTag.rel = "stylesheet";',
+                    'execLinkTag.type = "text/css";',
+                    'document.body.appendChild(execLinkTag);',
+                  ]),
+                  '}',
+                ]),
                 '}));',
               ]),
               '}',

test/HMR.test.js

@@ -27,7 +27,8 @@ describe('HMR', () => {
 
     jest.spyOn(Date, 'now').mockImplementation(() => 1479427200000);
 
-    document.head.innerHTML = '<link rel="stylesheet" href="/dist/main.css" />';
+    document.head.innerHTML =
+      '<link rel="preload" as="style" href="/dist/main.css" />';
     document.body.innerHTML = '<script src="/dist/main.js"></script>';
   });
 

test/__snapshots__/HMR.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`HMR should handle error event 1`] = `"[HMR] css reload %s"`;
 
-exports[`HMR should handle error event 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+exports[`HMR should handle error event 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
 exports[`HMR should reloads with # link href 1`] = `"[HMR] css reload %s"`;
 
@@ -18,22 +18,22 @@ exports[`HMR should reloads with link without href 2`] = `"<link rel=\\"styleshe
 
 exports[`HMR should reloads with locals 1`] = `"[HMR] Detected local css modules. Reload all css"`;
 
-exports[`HMR should reloads with locals 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+exports[`HMR should reloads with locals 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
 exports[`HMR should reloads with non http/https link href 1`] = `"[HMR] css reload %s"`;
 
 exports[`HMR should reloads with non http/https link href 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"shortcut icon\\" href=\\"data:;base64,=\\">"`;
 
 exports[`HMR should reloads with reloadAll option 1`] = `"[HMR] Reload all css"`;
 
-exports[`HMR should reloads with reloadAll option 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+exports[`HMR should reloads with reloadAll option 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
 exports[`HMR should works 1`] = `"[HMR] css reload %s"`;
 
-exports[`HMR should works 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+exports[`HMR should works 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
 exports[`HMR should works with multiple updates 1`] = `"[HMR] css reload %s"`;
 
-exports[`HMR should works with multiple updates 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
+exports[`HMR should works with multiple updates 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
-exports[`HMR should works with multiple updates 3`] = `"<link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200001\\">"`;
+exports[`HMR should works with multiple updates 3`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200001\\">"`;