Merge branch 'feature/webpack-entrypoint-preload'

NightmareNed · NightmareNed · commit 8a94a65be564 · 2023-03-28T03:05:54.000Z
diff --git a/src/entry-point-webpack-preload.ts b/src/entry-point-webpack-preload.ts
@@ -22,7 +22,7 @@ export function addLinkForEntryPointWebpackPreload(
 
     // Prepare link tags for HtmlWebpackPlugin
     const publicPath = getPublicPath(compilation, htmlPluginData);
-    const entryHtmlTagObjectMap = generateHtmlTagObject(entryFileMap, publicPath);
+    const entryHtmlTagObjectMap = generateHtmlTagObject(entryFileMap, publicPath, compilation);
     
     // Related files's link tags should follow parent script tag (the entries scripts' tag)
     // according to this [blog](https://web.dev/priority-hints/#using-preload-after-chrome-95).
@@ -89,20 +89,32 @@ function prepareEntryFileMap(
  * @param publicPath 
  * @returns 
  */
+<<<<<<< HEAD
 function generateHtmlTagObject(entryFileMap: Map<string, Set<string>>, publicPath: string): Map<EntryName, Set<HtmlTagObject>> {
+=======
+function generateHtmlTagObject(entryFileMap: Map<string, Set<string>>, publicPath: string, compilation: Compilation): Map<EntryName, Set<HtmlTagObject>> {
+>>>>>>> feature/webpack-entrypoint-preload
     const map = new Map();
     for (const [key, filesNames] of entryFileMap) {
         map.set(key, [...filesNames].map(fileName => {
             const href = `${publicPath}${fileName}`;
             const as = getTypeOfResource(fileName);
+<<<<<<< HEAD
             const crossOrigin = as === 'font';
+=======
+            const crossOrigin = as === 'font' ? 'anonymous' : compilation.outputOptions.crossOriginLoading;
+>>>>>>> feature/webpack-entrypoint-preload
             let attributes: HtmlTagObject['attributes'] = {
                 rel: 'preload',
                 href,
                 as
             }
             if (crossOrigin) {
+<<<<<<< HEAD
                 attributes = { ...attributes, crossorigin: undefined }
+=======
+                attributes = { ...attributes, crossorigin: crossOrigin }
+>>>>>>> feature/webpack-entrypoint-preload
             }
             return {
                 tagName: 'link',
diff --git a/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/await-imported-by-async-chunk.css b/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/await-imported-by-async-chunk.css
@@ -0,0 +1,11 @@
+body {
+  background-color: blue;
+  font-family: Roboto, sans-serif;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 400;
+  src: url('../../../../Roboto-Regular.woff2') format('woff2'),
+  url('../../../..//Roboto-Regular.woff') format('woff');
+}
diff --git a/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/await-imported-by-async-chunk.js b/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/await-imported-by-async-chunk.js
@@ -0,0 +1,4 @@
+import './await-imported-by-async-chunk.css';
+export async function awaitImportByAsyncChunk() {
+    console.log('awaitImportByAsyncChunk');
+}
diff --git a/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/await-imported-by-intial-chunk.css b/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/await-imported-by-intial-chunk.css
@@ -0,0 +1,11 @@
+body {
+  background-color: green;
+  font-family: Roboto, sans-serif;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 400;
+  src: url('../../../../Roboto-Regular.woff2') format('woff2'),
+  url('../../../..//Roboto-Regular.woff') format('woff');
+}
diff --git a/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/await-imported-by-intial-chunk.js b/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/await-imported-by-intial-chunk.js
@@ -0,0 +1,5 @@
+import './await-imported-by-intial-chunk.css';
+export async function awaitImportByInitialChunk() {
+    const { awaitImportByAsyncChunk } = await import(/* webpackPreload: true */'./await-imported-by-async-chunk');
+    awaitImportByAsyncChunk();
+}
diff --git a/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/entry.js b/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/entry.js
@@ -0,0 +1,6 @@
+async function main() {
+    const { awaitImportByInitialChunk } = await import(/* webpackPreload: true */ './await-imported-by-intial-chunk');
+    awaitImportByInitialChunk();
+}
+
+main();
diff --git a/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/index.html b/test/entrypoint-webpack-preload/spec/test-crossorigin/fixtures/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    foo
+  </body>
+</html>
diff --git a/test/entrypoint-webpack-preload/spec/test-crossorigin/test-crossorigin.test.ts b/test/entrypoint-webpack-preload/spec/test-crossorigin/test-crossorigin.test.ts
@@ -0,0 +1,64 @@
+import { webpack } from "webpack";
+import { getWebpackConfig } from "../../webpack-base-config";
+import path from 'path';
+import fs from 'fs';
+import { expectSuccessfulBuild } from "../utils";
+describe('HTMLWebpackInjectPreload test entry point webpack preload with cross origin loading', () => { 
+    it('should add crossorigin attributions when wepack output crossOriginLoading is \'anonymous\'', done => {
+        let config = getWebpackConfig('./fixtures/entry.js');
+        if (config.output) {
+            config.output.crossOriginLoading = 'anonymous';
+        }
+        const compiler = webpack(config);
+
+        compiler.run((err, stats) => {
+            expectSuccessfulBuild(err, stats);
+
+            const html = fs.readFileSync(
+                path.join(__dirname, 'dist/index.html'),
+                'utf8',
+            );
+            const preloadRegex = /<link[^>]+rel=["']preload["'][^>]+as=["']([^"']+)["'][^>]*>/;
+            const globalPreloadRegex = new RegExp(preloadRegex, "gm");
+            const result = html.match(globalPreloadRegex);
+            expect(result).not.toBeNull();
+            expect(result?.length).toBe(2);
+            
+            const corssOriginRegex = /<link[^>]+rel=["']preload["'][^>]+crossorigin=["']([^"']+)["'][^>]*>/;
+            const cssPreload = result![0].match(corssOriginRegex);
+            expect(cssPreload![1]).toBe('anonymous');
+            const jsPreload = result![1].match(corssOriginRegex);
+            expect(jsPreload![1]).toBe('anonymous');
+            done();
+        });
+    });
+
+    it('should add crossorigin attributions when wepack output crossOriginLoading is \'use-credentials\'', done => {
+        let config = getWebpackConfig('./fixtures/entry.js');
+        if (config.output) {
+            config.output.crossOriginLoading = 'use-credentials';
+        }
+        const compiler = webpack(config);
+
+        compiler.run((err, stats) => {
+            expectSuccessfulBuild(err, stats);
+
+            const html = fs.readFileSync(
+                path.join(__dirname, 'dist/index.html'),
+                'utf8',
+            );
+            const preloadRegex = /<link[^>]+rel=["']preload["'][^>]+as=["']([^"']+)["'][^>]*>/;
+            const globalPreloadRegex = new RegExp(preloadRegex, "gm");
+            const result = html.match(globalPreloadRegex);
+            expect(result).not.toBeNull();
+            expect(result?.length).toBe(2);
+
+            const corssOriginRegex = /<link[^>]+rel=["']preload["'][^>]+crossorigin=["']([^"']+)["'][^>]*>/;
+            const cssPreload = result![0].match(corssOriginRegex);
+            expect(cssPreload![1]).toBe('use-credentials');
+            const jsPreload = result![1].match(corssOriginRegex);
+            expect(jsPreload![1]).toBe('use-credentials');
+            done();
+        });
+    });
+ })
diff --git a/test/entrypoint-webpack-preload/spec/test-css-preload/fixtures/await-imported-by-async-chunk.css b/test/entrypoint-webpack-preload/spec/test-css-preload/fixtures/await-imported-by-async-chunk.css
@@ -0,0 +1,11 @@
+body {
+  background-color: blue;
+  font-family: Roboto, sans-serif;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-weight: 400;
+  src: url('../../../../Roboto-Regular.woff2') format('woff2'),
+  url('../../../..//Roboto-Regular.woff') format('woff');
+}
diff --git a/test/entrypoint-webpack-preload/spec/test-css-preload/fixtures/await-imported-by-async-chunk.js b/test/entrypoint-webpack-preload/spec/test-css-preload/fixtures/await-imported-by-async-chunk.js
@@ -1,3 +1,4 @@
+import './await-imported-by-async-chunk.css';
 export async function awaitImportByAsyncChunk() {
     console.log('awaitImportByAsyncChunk');
 }
diff --git a/test/entrypoint-webpack-preload/spec/test-css-preload/fixtures/await-imported-by-intial-chunk.js b/test/entrypoint-webpack-preload/spec/test-css-preload/fixtures/await-imported-by-intial-chunk.js
@@ -1,5 +1,5 @@
 import './await-imported-by-intial-chunk.css';
 export async function awaitImportByInitialChunk() {
-    const { awaitImportByAsyncChunk } = await import('./await-imported-by-async-chunk');
+    const { awaitImportByAsyncChunk } = await import(/* webpackPreload: true */'./await-imported-by-async-chunk');
     awaitImportByAsyncChunk();
 }
diff --git a/test/entrypoint-webpack-preload/spec/test-css-preload/test-css-preload.test.ts b/test/entrypoint-webpack-preload/spec/test-css-preload/test-css-preload.test.ts
@@ -2,8 +2,8 @@ import webpack from 'webpack';
 import { getWebpackConfig } from '../../webpack-base-config';
 import path from 'path';
 import fs from 'fs';
-import { mergeWithCustomize, customizeArray, merge } from 'webpack-merge';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { expectSuccessfulBuild } from '../utils';
 
 describe('HTMLWebpackInjectPreload test entry point webpack preload for css', () => {
     it('should add preload link tag for css await imported by initial chunk, with \'style\ as attribute', done => {
@@ -13,13 +13,7 @@ describe('HTMLWebpackInjectPreload test entry point webpack preload for css', ()
         const compiler = webpack(config);
 
         compiler.run((err, stats) => {
-            if (err) expect(err).toBeNull();
-            
-            const statsErrors = stats ? stats.compilation.errors : [];
-            if (statsErrors.length > 0) {
-                console.error(statsErrors);
-            }
-            expect(statsErrors.length).toBe(0);
+            expectSuccessfulBuild(err, stats);
             const html = fs.readFileSync(
                 path.join(__dirname, 'dist/index.html'),
                 'utf8',
diff --git a/test/entrypoint-webpack-preload/spec/test-js-preload/test-js-preload.test.ts b/test/entrypoint-webpack-preload/spec/test-js-preload/test-js-preload.test.ts
@@ -2,20 +2,16 @@ import webpack from 'webpack';
 import { getWebpackConfig } from '../../webpack-base-config';
 import path from 'path';
 import fs from 'fs';
+import { expectSuccessfulBuild } from '../utils';
 
 describe('HTMLWebpackInjectPreload test entry point webpack preload', () => {
     it('should add preload link tag for js await imported by initial chunk, with \'script\ as attribute', done => {
         const config = getWebpackConfig('./fixtures/entry.js');
         const compiler = webpack(config);
 
         compiler.run((err, stats) => {
-            if (err) expect(err).toBeNull();
+            expectSuccessfulBuild(err, stats);
             
-            const statsErrors = stats ? stats.compilation.errors : [];
-            if (statsErrors.length > 0) {
-                console.error(statsErrors);
-            }
-            expect(statsErrors.length).toBe(0);
             const html = fs.readFileSync(
                 path.join(__dirname, 'dist/index.html'),
                 'utf8',
diff --git a/test/entrypoint-webpack-preload/spec/utils.ts b/test/entrypoint-webpack-preload/spec/utils.ts
@@ -0,0 +1,9 @@
+import { Stats } from "webpack";
+export function expectSuccessfulBuild(err: Error | null | undefined, stats?: Stats) {
+    if (err) expect(err).toBeNull();
+    const statsErrors = stats ? stats.compilation.errors : [];
+    if (statsErrors.length > 0) {
+        console.error(statsErrors);
+    }
+    expect(statsErrors.length).toBe(0);
+}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import './await-imported-by-async-chunk.css';`
`1`	`2`	`export async function awaitImportByAsyncChunk() {`
`2`	`3`	`console.log('awaitImportByAsyncChunk');`
`3`	`4`	`}`