Prefetch and preload from entry chunk.

Following up on @sokra's work in webpack#7056, this change addresses webpack#7084 to have webpack prefetch and preload designated chunks from the entry chunk.
MLoughry · May 29, 2018 · eefacf3 · eefacf3
1 parent 4f4a2ba
commit eefacf3
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 29 deletions.
diff --git a/lib/web/JsonpMainTemplatePlugin.js b/lib/web/JsonpMainTemplatePlugin.js
@@ -28,6 +28,13 @@ class JsonpMainTemplatePlugin {
 			}
 			return false;
 		};
+		const needEntryChunkPrefetch = chunk => {
+			const preloadMaps = chunk.getChildIdsByOrders();
+			for (const preloadGroup of Object.keys(preloadMaps)) {
+				if (preloadMaps[preloadGroup].length > 0) return true;
+			}
+			return false;
+		};
 		// TODO refactor this
 		if (!mainTemplate.hooks.jsonpScript) {
 			mainTemplate.hooks.jsonpScript = new SyncWaterfallHook([
@@ -106,6 +113,38 @@ class JsonpMainTemplatePlugin {
 				contentHashType: "javascript"
 			});
 		};
+
+		const linkPreload = mainTemplate => {
+			const crossOriginLoading = mainTemplate.outputOptions.crossOriginLoading;
+			const jsonpScriptType = mainTemplate.outputOptions.jsonpScriptType;
+			return Template.asString([
+				"var link = document.createElement('link');",
+				jsonpScriptType
+					? `link.type = ${JSON.stringify(jsonpScriptType)};`
+					: "",
+				"link.charset = 'utf-8';",
+				crossOriginLoading
+					? `link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
+					: "",
+				`if (${mainTemplate.requireFn}.nc) {`,
+				Template.indent(
+					`link.setAttribute("nonce", ${mainTemplate.requireFn}.nc);`
+				),
+				"}",
+				'link.rel = "preload";',
+				'link.as = "script";',
+				"link.href = jsonpScriptSrc(chunkId);"
+			]);
+		};
+
+		const linkPrefetch = () => {
+			return Template.asString([
+				"var link = document.createElement('link');",
+				'link.rel = "prefetch";',
+				"link.href = jsonpScriptSrc(chunkId);"
+			]);
+		};
+
 		mainTemplate.hooks.localVars.tap(
 			"JsonpMainTemplatePlugin",
 			(source, chunk, hash) => {
@@ -140,6 +179,33 @@ class JsonpMainTemplatePlugin {
 						"}"
 					);
 				}
+				if (needEntryChunkPrefetch(chunk)) {
+					let preloadPrefetchChildren = chunk.getChildIdsByOrders();
+					extraCode.push(
+						"",
+						"// preload or prefetch split chunks from entry chunk",
+						"(function prefetchOrPreloadFromEntry() {",
+						preloadPrefetchChildren.preload
+							? Template.indent([
+									`${JSON.stringify(
+										preloadPrefetchChildren.preload
+									)}.map(chunkId => {`,
+									Template.indent([linkPreload(mainTemplate)]),
+									`});`
+							  ])
+							: "",
+						preloadPrefetchChildren.prefetch
+							? Template.indent([
+									`${JSON.stringify(
+										preloadPrefetchChildren.prefetch || []
+									)}.map(chunkId => {`,
+									Template.indent([linkPrefetch()]),
+									`});`
+							  ])
+							: "",
+						"})();"
+					);
+				}
 				if (extraCode.length === 0) return source;
 				return Template.asString([source, ...extraCode]);
 			}
@@ -205,38 +271,13 @@ class JsonpMainTemplatePlugin {
 		mainTemplate.hooks.linkPreload.tap(
 			"JsonpMainTemplatePlugin",
 			(_, chunk, hash) => {
-				const crossOriginLoading =
-					mainTemplate.outputOptions.crossOriginLoading;
-				const jsonpScriptType = mainTemplate.outputOptions.jsonpScriptType;
-
-				return Template.asString([
-					"var link = document.createElement('link');",
-					jsonpScriptType
-						? `link.type = ${JSON.stringify(jsonpScriptType)};`
-						: "",
-					"link.charset = 'utf-8';",
-					crossOriginLoading
-						? `link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
-						: "",
-					`if (${mainTemplate.requireFn}.nc) {`,
-					Template.indent(
-						`link.setAttribute("nonce", ${mainTemplate.requireFn}.nc);`
-					),
-					"}",
-					'link.rel = "preload";',
-					'link.as = "script";',
-					"link.href = jsonpScriptSrc(chunkId);"
-				]);
+				return linkPreload(mainTemplate);
 			}
 		);
 		mainTemplate.hooks.linkPrefetch.tap(
 			"JsonpMainTemplatePlugin",
 			(_, chunk, hash) => {
-				return Template.asString([
-					"var link = document.createElement('link');",
-					'link.rel = "prefetch";',
-					"link.href = jsonpScriptSrc(chunkId);"
-				]);
+				return linkPrefetch();
 			}
 		);
 		mainTemplate.hooks.requireEnsure.tap(

diff --git a/test/__snapshots__/StatsTestCases.test.js.snap b/test/__snapshots__/StatsTestCases.test.js.snap
@@ -1672,7 +1672,7 @@ exports[`StatsTestCases should print correct stats for prefetch 1`] = `
      normal.js  130 bytes       1  [emitted]  normal
 prefetched2.js  127 bytes       2  [emitted]  prefetched2
 prefetched3.js  130 bytes       3  [emitted]  prefetched3
-       main.js   9.73 KiB       4  [emitted]  main
+       main.js   10.1 KiB       4  [emitted]  main
       inner.js  136 bytes       5  [emitted]  inner
      inner2.js  201 bytes       6  [emitted]  inner2
 Entrypoint main = main.js (prefetch: prefetched2.js prefetched.js prefetched3.js)
@@ -1705,7 +1705,7 @@ exports[`StatsTestCases should print correct stats for preload 1`] = `
     normal.js  130 bytes       1  [emitted]  normal
 preloaded2.js  127 bytes       2  [emitted]  preloaded2
 preloaded3.js  130 bytes       3  [emitted]  preloaded3
-      main.js   9.85 KiB       4  [emitted]  main
+      main.js   10.4 KiB       4  [emitted]  main
      inner.js  136 bytes       5  [emitted]  inner
     inner2.js  201 bytes       6  [emitted]  inner2
 Entrypoint main = main.js (preload: preloaded2.js preloaded.js preloaded3.js)