refactor: Remove --preload flag (#1737)

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

* docs: Adding changeset

* docs: Updating readme for removal of preload

Author: rschristian

.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/create-load-manifest.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';
@@ -85,26 +84,16 @@ 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,
 						url,
 						manifest: config.manifest,
 						inlineCss: config['inline-css'],
-						preload: config.preload,
 						config,
 						preRenderData: values,
 						CLI_DATA: { preRenderData: { url, ...routeData } },
 						ssr: config.prerender ? prerender({ cwd, dest, src }, values) : '',
-						loadManifest,
 						entrypoints,
 					},
 					htmlWebpackPlugin: {

packages/cli/src/lib/webpack/push-manifest.js

@@ -302,7 +302,7 @@ module.exports = function createBaseConfig(env) {
 			}),
 			new WebpackManifestPlugin({
 				fileName: 'asset-manifest.json',
-				assetHookStage: webpack.Compiler.PROCESS_ASSETS_STAGE_ANALYSE,
+				assetHookStage: webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
 				// TODO: Remove this next breaking change and use the full filepath from this manifest
 				// when referring to built assets, i.e.:
 				// https://github.com/preactjs/preact-cli/blob/master/packages/cli/src/resources/head-end.ejs#L1

packages/cli/src/lib/webpack/render-html-plugin.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');
@@ -125,7 +124,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/lib/webpack/webpack-base-config.js

@@ -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/src/lib/webpack/webpack-client-config.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');