refactor: Remove optimize-plugin (#1816)

* refactor: Remove `optimize-plugin`

* test: Update test suite

* docs: Add changeset

.changeset/lazy-zoos-clean.md

@@ -0,0 +1,6 @@
+---
+'preact-cli': patch
+'create-preact-cli': patch
+---
+
+Removed `optimize-plugin`, now a single bundle will be output.

packages/cli/package.json

@@ -64,7 +64,6 @@
     "kleur": "^4.1.4",
     "mini-css-extract-plugin": "^2.5.3",
     "minimatch": "^3.0.3",
-    "optimize-plugin": "^1.3.1",
     "postcss": "^8.4.13",
     "postcss-load-config": "^3.1.4",
     "postcss-loader": "^6.2.1",

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

@@ -85,21 +85,6 @@ module.exports = async function renderHTMLPlugin(config, env) {
 			entrypoints[name] =
 				publicPath + entryFiles.find(file => /\.m?js(?:\?|$)/.test(file));
 		});
-
-		const optimizePlugin = compilation.options.plugins.find(
-			plugin => plugin.constructor.name == 'OptimizePlugin'
-		);
-		if (optimizePlugin) {
-			// Retrieves the (generated) legacy bundle
-			const legacyBundle = entrypoints['bundle']
-				.replace(publicPath, '')
-				.replace(/\.js$/, '.legacy.js');
-			entrypoints['legacy-bundle'] = publicPath + legacyBundle;
-
-			// Retrieves the (generated) es-polyfills
-			entrypoints['es-polyfills'] =
-				publicPath + optimizePlugin.options.polyfillsFilename;
-		}
 	};
 
 	const htmlWebpackConfig = values => {

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

@@ -14,7 +14,6 @@ const baseConfig = require('./webpack-base-config');
 const { InjectManifest } = require('workbox-webpack-plugin');
 const RefreshPlugin = require('@prefresh/webpack');
 const { normalizePath, warn } = require('../../util');
-const OptimizePlugin = require('optimize-plugin');
 
 const cleanFilename = name =>
 	name.replace(
@@ -46,7 +45,7 @@ async function clientConfig(config, env) {
 				swSrc: swPath,
 				include: [
 					/200\.html$/,
-					/(?<!legacy|polyfills)\.js$/,
+					/(?<!polyfills)\.js$/,
 					/\.css$/,
 					/\.(png|jpg|svg|gif|webp|avif)$/,
 				],
@@ -149,16 +148,9 @@ function prodBuild(config) {
 		),
 
 		plugins: [
-			new OptimizePlugin({
-				polyfillsFilename: 'es-polyfills.js',
-				exclude: [/^sw.*\.js/, /^dom-polyfills.*\.js/],
-				modernize: false,
-				minify: false,
-				verbose: false,
-			}),
 			new SizePlugin({
 				stripHash: name =>
-					name.replace(/\.[a-z0-9]{5}((\.legacy)?\.(?:js|css)$)/i, '.*****$1'),
+					name.replace(/\.[a-z0-9]{5}(\.(?:js|css)$)/i, '.*****$1'),
 			}),
 		],
 		cache: true,

packages/cli/src/resources/template.ejs

@@ -21,7 +21,5 @@
 		<% } %>
 		<script type="module" src="<%= cli.entrypoints['bundle'] %>"></script>
 		<script nomodule src="<%= cli.entrypoints['dom-polyfills'] %>"></script>
-		<script nomodule src="<%= cli.entrypoints['es-polyfills'] %>"></script>
-		<script nomodule defer src="<%= cli.entrypoints['legacy-bundle'] %>"></script>
 	</body>
 </html>

packages/cli/tests/build.test.js

@@ -8,7 +8,7 @@ const {
 	writeFile,
 } = require('fs/promises');
 const looksLike = require('html-looks-like');
-const { create, build, buildFast } = require('./lib/cli');
+const { create, build } = require('./lib/cli');
 const { snapshot } = require('./lib/utils');
 const { subject } = require('./lib/output');
 const images = require('./images/build');
@@ -80,25 +80,25 @@ describe('preact build', () => {
 	it('builds the `typescript` template', async () => {
 		let dir = await create('typescript');
 
-		await expect(buildFast(dir)).resolves.not.toThrow();
+		await expect(build(dir)).resolves.not.toThrow();
 	});
 
 	it('should patch global location object', async () => {
 		let dir = await subject('location-patch');
 
-		await expect(buildFast(dir)).resolves.not.toThrow();
+		await expect(build(dir)).resolves.not.toThrow();
 	});
 
 	it('should copy resources from static to build directory', async () => {
 		let dir = await subject('static-root');
-		await buildFast(dir);
+		await build(dir);
 		let file = join(dir, 'build', '.htaccess');
 		expect(await access(file)).toBeUndefined();
 	});
 
 	it('should use a custom `.env` with prefixed environment variables', async () => {
 		let dir = await subject('custom-dotenv');
-		await buildFast(dir);
+		await build(dir);
 
 		const bundleFile = (await readdir(`${dir}/build`)).find(file =>
 			/bundle\.\w{5}\.js$/.test(file)
@@ -131,15 +131,13 @@ describe('preact build', () => {
 			await rename(join(dir, 'index.js'), join(dir, 'renamed-src/index.js'));
 			await rename(join(dir, 'style.css'), join(dir, 'renamed-src/style.css'));
 
-			await expect(
-				buildFast(dir, { src: 'renamed-src' })
-			).resolves.not.toThrow();
+			await expect(build(dir, { src: 'renamed-src' })).resolves.not.toThrow();
 		});
 
 		it('--dest', async () => {
 			let dir = await subject('minimal');
 
-			await buildFast(dir, { dest: 'renamed-dest' });
+			await build(dir, { dest: 'renamed-dest' });
 			expect(await access(join(dir, 'renamed-dest'))).toBeUndefined();
 		});
 
@@ -148,13 +146,13 @@ describe('preact build', () => {
 
 			const logSpy = jest.spyOn(process.stdout, 'write');
 
-			await buildFast(dir, { sw: true });
+			await build(dir, { sw: true });
 			expect(await access(join(dir, 'build', 'sw.js'))).toBeUndefined();
 			expect(logSpy).toHaveBeenCalledWith(
 				expect.stringContaining('Could not find sw.js')
 			);
 
-			await buildFast(dir, { sw: false });
+			await build(dir, { sw: false });
 			await expect(access(join(dir, 'build', 'sw.js'))).rejects.toThrow(
 				'no such file or directory'
 			);
@@ -165,12 +163,12 @@ describe('preact build', () => {
 			// Prerendering is disabled to avoid (non-relevant) regenerator issues
 			let dir = await subject('custom-babelrc');
 
-			await buildFast(dir, { prerender: false });
+			await build(dir, { prerender: false });
 			let transpiledChunk = await getOutputFile(dir, /bundle\.\w{5}\.js$/);
 			expect(/=>\s?setTimeout/.test(transpiledChunk)).toBe(false);
 
 			await rename(join(dir, '.babelrc'), join(dir, 'babel.config.json'));
-			await buildFast(dir, {
+			await build(dir, {
 				babelConfig: 'babel.config.json',
 				prerender: false,
 			});
@@ -185,7 +183,7 @@ describe('preact build', () => {
 				join(dir, 'template.ejs'),
 				join(dir, 'renamed-template.ejs')
 			);
-			await buildFast(dir, { template: 'renamed-template.ejs' });
+			await build(dir, { template: 'renamed-template.ejs' });
 
 			const html = await getOutputFile(dir, 'index.html');
 			expect(html).toEqual(
@@ -196,19 +194,19 @@ describe('preact build', () => {
 		it('--prerender', async () => {
 			let dir = await subject('minimal');
 
-			await buildFast(dir, { prerender: true });
+			await build(dir, { prerender: true });
 			let html = await getOutputFile(dir, 'index.html');
 			expect(html).toMatch('<h1>Minimal App</h1>');
 
-			await buildFast(dir, { prerender: false });
+			await build(dir, { prerender: false });
 			html = await getOutputFile(dir, 'index.html');
 			expect(html).not.toMatch('<h1>Minimal App</h1>');
 		});
 
 		it('--prerenderUrls', async () => {
 			let dir = await subject('multiple-prerendering');
 
-			await buildFast(dir, { prerenderUrls: 'prerender-urls.json' });
+			await build(dir, { prerenderUrls: 'prerender-urls.json' });
 			expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
 			expect(
 				await access(join(dir, 'build/route66/index.html'))
@@ -221,7 +219,7 @@ describe('preact build', () => {
 				join(dir, 'prerender-urls.json'),
 				join(dir, 'renamed-urls.json')
 			);
-			await buildFast(dir, { prerenderUrls: 'renamed-urls.json' });
+			await build(dir, { prerenderUrls: 'renamed-urls.json' });
 			expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
 			expect(
 				await access(join(dir, 'build/route66/index.html'))
@@ -234,26 +232,26 @@ describe('preact build', () => {
 		it('--inlineCss', async () => {
 			let dir = await subject('minimal');
 
-			await buildFast(dir, { inlineCss: true });
+			await build(dir, { inlineCss: true });
 			let head = await getHead(dir);
 			expect(head).toMatch('<style>h1{color:red}</style>');
 
-			await buildFast(dir, { inlineCss: false });
+			await build(dir, { inlineCss: false });
 			head = await getOutputFile(dir, 'index.html');
 			expect(head).not.toMatch(/<style>[^<]*<\/style>/);
 		});
 
 		it('--config', async () => {
 			let dir = await subject('custom-webpack');
 
-			await buildFast(dir, { config: 'preact.config.js' });
+			await build(dir, { config: 'preact.config.js' });
 			expect(await access(join(dir, 'build/bundle.js'))).toBeUndefined();
 
 			await rename(
 				join(dir, 'preact.config.js'),
 				join(dir, 'renamed-config.js')
 			);
-			await buildFast(dir, { config: 'renamed-config.js' });
+			await build(dir, { config: 'renamed-config.js' });
 			expect(await access(join(dir, 'build/bundle.js'))).toBeUndefined();
 		});
 
@@ -278,7 +276,7 @@ describe('preact build', () => {
 				'h2{color:green}'
 			);
 
-			await buildFast(dir);
+			await build(dir);
 			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
 
 			expect(builtStylesheet).toMatch('h1{color:red}');
@@ -289,7 +287,7 @@ describe('preact build', () => {
 
 		it('should use plain CSS & CSS Modules together, determining loading method by filename', async () => {
 			let dir = await subject('css-modules');
-			await buildFast(dir);
+			await build(dir);
 			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
 
 			expect(builtStylesheet).toMatch('h1{color:red}');
@@ -298,7 +296,7 @@ describe('preact build', () => {
 
 		it('should inline critical CSS only', async () => {
 			let dir = await subject('css-inline');
-			await buildFast(dir);
+			await build(dir);
 			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
 			const html = await getOutputFile(dir, 'index.html');
 
@@ -309,15 +307,15 @@ describe('preact build', () => {
 		// Issue #1411
 		it('should preserve side-effectful CSS imports even if package.json claims no side effects', async () => {
 			let dir = await subject('css-side-effect');
-			await buildFast(dir);
+			await build(dir);
 
 			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
 			expect(builtStylesheet).toMatch('h1{background:#673ab8}');
 		});
 
 		it('should use SASS, SCSS, and CSS Modules for each', async () => {
 			let dir = await subject('css-sass');
-			await buildFast(dir);
+			await build(dir);
 			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
 
 			expect(builtStylesheet).toMatch('h1{background:blue;color:red}');
@@ -330,7 +328,7 @@ describe('preact build', () => {
 		prerenderUrlFiles.forEach(prerenderUrls => {
 			it(`should prerender the routes provided with '${prerenderUrls}'`, async () => {
 				let dir = await subject('multiple-prerendering');
-				await buildFast(dir, { prerenderUrls });
+				await build(dir, { prerenderUrls });
 
 				const body1 = await getBody(dir);
 				looksLike(body1, images.prerender.home);
@@ -367,7 +365,7 @@ describe('preact build', () => {
 		prerenderUrlFiles.forEach(prerenderUrls => {
 			it(`should prerender the routes with data provided with '${prerenderUrls}' via provider`, async () => {
 				let dir = await subject('multiple-prerendering-with-provider');
-				await buildFast(dir, { prerenderUrls });
+				await build(dir, { prerenderUrls });
 
 				const body1 = await getBody(dir);
 				looksLike(body1, images.prerender.home);

packages/cli/tests/config-formats.test.js

@@ -1,6 +1,6 @@
 const { join } = require('path');
 const { access } = require('fs/promises');
-const { build, buildFast } = require('./lib/cli');
+const { build } = require('./lib/cli');
 const { subject } = require('./lib/output');
 
 const formats = ['cjs', 'esm'];
@@ -19,7 +19,7 @@ describe('config files', () => {
 		it(`should load the 'prerender-urls.json' file`, async () => {
 			let dir = await subject('multiple-config-files');
 
-			await buildFast(dir);
+			await build(dir);
 
 			expect(await access(join(dir, 'build/index.html'))).toBeUndefined();
 			expect(
@@ -32,7 +32,7 @@ describe('config files', () => {
 				it(`should load the '${dataFormat}' file in ${moduleFormat}`, async () => {
 					let dir = await subject('multiple-config-files');
 
-					await buildFast(dir, {
+					await build(dir, {
 						prerenderUrls: `prerenderUrls/${moduleFormat}/${dataFormat}`,
 					});
 

packages/cli/tests/images/build.js

@@ -14,33 +14,26 @@ exports.default = {
 	'ssr-build/ssr-bundle.css': 2346,
 	'ssr-build/ssr-bundle.css.map': 3603,
 
-	'bundle.d55d3.js': 22978,
-	'bundle.d55d3.js.map': 92378,
-	'bundle.d55d3.legacy.js': 23646,
-	'bundle.d55d3.legacy.js.map': 92673,
+	'bundle.05a31.js': 22978,
+	'bundle.05a31.js.map': 125226,
 	'bundle.6329a.css': 1173,
 	'bundle.6329a.css.map': 2165,
 
-	'dom-polyfills.99150.js': 5221,
-	'dom-polyfills.99150.js.map': 18676,
-	'es-polyfills.js': 46419,
+	'dom-polyfills.f5813.js': 5221,
+	'dom-polyfills.f5813.js.map': 18676,
 
 	'favicon.ico': 15086,
 	'index.html': 3998,
 	'manifest.json': 455,
 	'preact_prerender_data.json': 11,
 
-	'route-home.chunk.ede4d.js': 1179,
-	'route-home.chunk.ede4d.js.map': 3814,
-	'route-home.chunk.ede4d.legacy.js': 1222,
-	'route-home.chunk.ede4d.legacy.js.map': 3964,
-	'route-home.chunk.d116e.css': 838,
-	'route-home.chunk.d116e.css.map': 1406,
-
-	'route-profile.chunk.6856a.js': 3165,
-	'route-profile.chunk.6856a.js.map': 13170,
-	'route-profile.chunk.6856a.legacy.js': 3302,
-	'route-profile.chunk.6856a.legacy.js.map': 13200,
+	'route-home.chunk.585d0.js': 1231,
+	'route-home.chunk.585d0.js.map': 2057,
+	'route-home.chunk.d116e.css': 825,
+	'route-home.chunk.d116e.css.map': 1378,
+
+	'route-profile.chunk.66aa5.js': 3300,
+	'route-profile.chunk.66aa5.js.map': 21931,
 };
 
 exports.prerender = {};
@@ -176,8 +169,6 @@ exports.publicPath = `
 		<script type="__PREACT_CLI_DATA__">%7B%22prerenderData%22:%7B%22url%22:%22/%22%7D%7D</script>
 		<script type="module" src="/example-path/bundle.\\w{5}.js"></script>
 		<script nomodule="" src="/example-path/dom-polyfills.\\w{5}.js"></script>
-		<script nomodule="" src="/example-path/es-polyfills.js"></script>
-		<script nomodule="" defer="defer" src="/example-path/bundle.\\w{5}.legacy.js"></script>
 	</body>
 </html>
 `;