refactor: Remove --preload flag (#1737)

* refactor: Removes `--preload` flag & functionality

* docs: Adding changeset

* docs: Updating readme for removal of preload

.changeset/poor-sloths-mate.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': major
+---
+
+Removes `--preload` flag and functionality from build command.

README.md

@@ -125,7 +125,6 @@ $ [npm run / yarn] preact build
     --babelConfig      Path to custom Babel config (default .babelrc)
     --json             Generate build stats for bundle analysis
     --template         Path to custom HTML template (default 'src/template.html')
-    --preload          Adds preload tags to the document its assets  (default false)
     --analyze          Launch interactive Analyzer to inspect production bundle(s)
     --prerender        Renders route(s) into generated static HTML  (default true)
     --prerenderUrls    Path to pre-rendered routes config  (default prerender-urls.json)

packages/cli/src/index.js

@@ -44,11 +44,6 @@ prog
 		'--template',
 		'Path to custom HTML template (default "src/template.html")'
 	)
-	.option(
-		'--preload',
-		'Adds preload links to the HTML for required resources',
-		false
-	)
 	.option(
 		'--analyze',
 		'Launch interactive Analyzer to inspect production bundle(s)',

packages/cli/src/lib/webpack/render-html-plugin.js

@@ -7,7 +7,6 @@ const {
 } = require('html-webpack-skip-assets-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const prerender = require('./prerender');
-const createLoadManifest = require('./create-load-manifest');
 const { esmImport, tryResolveConfig, warn } = require('../../util');
 
 const PREACT_FALLBACK_URL = '/200.html';
@@ -82,14 +81,6 @@ module.exports = async function renderHTMLPlugin(config) {
 						entryFiles.find(file => /\.(m?js)(\?|$)/.test(file));
 				});
 
-				let loadManifest = compilation.assets['push-manifest.json']
-					? JSON.parse(compilation.assets['push-manifest.json'].source())
-					: createLoadManifest(
-							compilation.assets,
-							compilation.namedChunkGroups,
-							config.isProd
-					  );
-
 				return {
 					cli: {
 						title,
@@ -101,7 +92,6 @@ module.exports = async function renderHTMLPlugin(config) {
 						preRenderData: values,
 						CLI_DATA: { preRenderData: { url, ...routeData } },
 						ssr: config.prerender ? prerender({ cwd, dest, src }, values) : '',
-						loadManifest,
 						entrypoints,
 					},
 					htmlWebpackPlugin: {

packages/cli/src/lib/webpack/webpack-client-config.js

@@ -10,7 +10,6 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CrittersPlugin = require('critters-webpack-plugin');
 const renderHTMLPlugin = require('./render-html-plugin');
-const PushManifestPlugin = require('./push-manifest');
 const baseConfig = require('./webpack-base-config');
 const { InjectManifest } = require('workbox-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
@@ -132,7 +131,6 @@ async function clientConfig(env) {
 				'process.env.ADD_SW': env.sw,
 				'process.env.PRERENDER': env.prerender,
 			}),
-			new PushManifestPlugin(env.isProd),
 			...(await renderHTMLPlugin(env)),
 			copyPatterns.length !== 0 &&
 				new CopyWebpackPlugin({

packages/cli/src/resources/head-end.ejs

@@ -2,10 +2,3 @@
 <% if (cli.manifest.theme_color) { %>
 	<meta name="theme-color" content="<%= cli.manifest.theme_color %>">
 <% } %>
-<% const filesRegexp = cli.inlineCss ? /\.(chunk\.\w{5}\.css|js)$/ : /\.(css|js)$/;%>
-<% for (const file in cli.loadManifest[cli.url]) { %>
-	<% if (cli.preload && file && file.match(filesRegexp)) { %>
-		<% /* crossorigin for main bundle as that is loaded from `<script type=module` tag, other lazy loaded bundles are from webpack so its not needed */ %>
-		<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>" <%= file.match(/bundle\.\w{5}\.(?<!legacy)\.js$/)?'crossorigin="anonymous"':'' %>>
-	<% } %>
-<% } %>

packages/cli/tests/build.test.js

@@ -90,58 +90,6 @@ describe('preact build', () => {
 		expect(await access(file)).toBeUndefined();
 	});
 
-	describe('Push manifest plugin', () => {
-		it('should produce correct default `push-manifest.json`', async () => {
-			let dir = await create('default');
-
-			await buildFast(dir);
-			const manifest = await readFile(
-				`${dir}/build/push-manifest.json`,
-				'utf8'
-			);
-			expect(manifest).toEqual(
-				expect.stringMatching(getRegExpFromMarkup(images.pushManifest))
-			);
-		});
-
-		it('should produce correct `push-manifest.json` when expected values are missing', async () => {
-			// In this subject, there is no source CSS which means no CSS asset is output.
-			// In the past, this would result in `"undefined": { type: "style" ... }` being added to the manifest.
-			let dir = await subject('custom-webpack');
-			await buildFast(dir);
-			const manifest = await readFile(
-				`${dir}/build/push-manifest.json`,
-				'utf8'
-			);
-			expect(manifest).not.toMatch(/"undefined"/);
-		});
-
-		// Issue #1675
-		it('should produce correct `push-manifest.json` when user configures output filenames', async () => {
-			let dir = await subject('custom-webpack');
-
-			const config = await readFile(`${dir}/preact.config.js`, 'utf8');
-			await writeFile(
-				`${dir}/preact.config.js`,
-				config.replace(
-					"config.output.filename = '[name].js'",
-					"config.output.filename = 'scripts/[name].js'"
-				)
-			);
-
-			await buildFast(dir, { prerender: false });
-			const manifest = await readFile(
-				`${dir}/build/push-manifest.json`,
-				'utf8'
-			);
-			expect(manifest).toEqual(
-				expect.stringMatching(
-					getRegExpFromMarkup(images.pushManifestAlteredFilenames)
-				)
-			);
-		});
-	});
-
 	it('should use a custom `.env` with prefixed environment variables', async () => {
 		let dir = await subject('custom-dotenv');
 		await buildFast(dir);
@@ -253,22 +201,6 @@ describe('preact build', () => {
 			);
 		});
 
-		it('--preload', async () => {
-			let dir = await subject('preload-chunks');
-
-			await buildFast(dir, { preload: true });
-			let head = await getHead(dir);
-			expect(head).toEqual(
-				expect.stringMatching(getRegExpFromMarkup(images.preload.true))
-			);
-
-			await buildFast(dir, { preload: false });
-			head = await getHead(dir);
-			expect(head).toEqual(
-				expect.stringMatching(getRegExpFromMarkup(images.preload.false))
-			);
-		});
-
 		it('--prerender', async () => {
 			let dir = await subject('minimal');
 

packages/cli/tests/images/build.js

@@ -28,7 +28,6 @@ exports.default = {
 	'index.html': 2264,
 	'manifest.json': 455,
 	'preact_prerender_data.json': 11,
-	'push-manifest.json': 450,
 	'asset-manifest.json': 943,
 
 	'route-home.chunk.dd4a3.js': 347,
@@ -100,45 +99,6 @@ exports.prerender.heads.custom = `
 <\\/head>
 `;
 
-exports.preload = {};
-
-exports.preload.true = `
-<head>
-	<meta charset=\\"utf-8\\">
-	<title>preact-preload-chunks<\\/title>
-	<meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\">
-	<meta name=\\"mobile-web-app-capable\\" content=\\"yes\\">
-	<meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\">
-	<link rel=\\"apple-touch-icon\\" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\">
-	<link rel=\\"manifest\\" href=\\"\\/manifest\\.json\\">
-	<link rel=\\"preload\\" href=\\"\\/bundle\\.\\w{5}\\.js\\" as=\\"script\\">
-	<link rel=\\"preload\\" href=\\"\\/route-home\\.chunk\\.\\w{5}\\.js\\" as=\\"script\\">
-	<link rel=\\"preload\\" href=\\"\\/route-home\\.chunk\\.\\w{5}\\.css\\" as=\\"style\\">
-	<style>html{padding:0}<\\/style>
-	<link href=\\"\\/bundle\\.\\w{5}\\.css\\" rel=\\"stylesheet\\" media=\\"print\\" onload=\\"this.media='all'\\">
-	<noscript>
-		<link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\">
-	</noscript>
-</head>
-`;
-
-exports.preload.false = `
-<head>
-	<meta charset=\\"utf-8\\">
-	<title>preact-preload-chunks<\\/title>
-	<meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\">
-	<meta name=\\"mobile-web-app-capable\\" content=\\"yes\\">
-	<meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\">
-	<link rel=\\"apple-touch-icon\\" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\">
-	<link rel=\\"manifest\\" href=\\"\\/manifest\\.json\\">
-	<style>html{padding:0}<\\/style>
-	<link href=\\"\\/bundle\\.\\w{5}\\.css\\" rel=\\"stylesheet\\" media=\\"print\\" onload=\\"this.media='all'\\">
-	<noscript>
-		<link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\">
-	</noscript>
-</head>
-`;
-
 exports.prerender.home = `
 <body>
 	<div id="app">
@@ -207,58 +167,6 @@ exports.template = `
 </html>
 `;
 
-exports.pushManifest = `
-{
-	"/":{
-		"bundle.\\w{5}.css":{
-			"type":"style",
-			"weight":1
-		},
-		"bundle.\\w{5}.js":{
-			"type":"script",
-			"weight":1
-		},
-		"route-home.chunk.\\w{5}.js":{
-			"type":"script",
-			"weight":0.9
-		},
-		"route-home.chunk.\\w{5}.css":{
-			"type":"style",
-			"weight":0.9
-		}
-	},
-	"/profile":{
-		"bundle.\\w{5}.css":{
-			"type":"style",
-			"weight":1
-		},
-		"bundle.\\w{5}.js":{
-			"type":"script",
-			"weight":1
-		},
-		"route-profile.chunk.\\w{5}.js":{
-			"type":"script",
-			"weight":0.9
-		},
-		"route-profile.chunk.\\w{5}.css":{
-			"type":"style",
-			"weight":0.9
-		}
-	}
-}
-`;
-
-exports.pushManifestAlteredFilenames = `
-{
-	"/":{
-		"scripts/bundle.js":{
-			"type":"script",
-			"weight":1
-		}
-	}
-}
-`;
-
 exports.publicPath = `
 <!DOCTYPE html>
 <html lang="en">