refactor: Replacing babel-esm-plugin with optimize-plugin

Author: rschristian

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

@@ -12,11 +12,11 @@ const CrittersPlugin = require('critters-webpack-plugin');
 const renderHTMLPlugin = require('./render-html-plugin');
 const PushManifestPlugin = require('./push-manifest');
 const baseConfig = require('./webpack-base-config');
-//const BabelEsmPlugin = require('babel-esm-plugin');
 const { InjectManifest } = require('workbox-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const RefreshPlugin = require('@prefresh/webpack');
 const { normalizePath, warn } = require('../../util');
+const OptimizePlugin = require('optimize-plugin');
 
 const cleanFilename = name =>
 	name.replace(
@@ -50,10 +50,9 @@ async function clientConfig(env) {
 			swInjectManifest.push(
 				new InjectManifest({
 					swSrc: swPath,
-					swDest: 'sw-esm.js',
 					include: [
 						/200\.html$/,
-						/\.esm.js$/,
+						/(?<!legacy).js$/,
 						/\.css$/,
 						/\.(png|jpg|svg|gif|webp)$/,
 					],
@@ -64,15 +63,20 @@ async function clientConfig(env) {
 					],
 				})
 			);
+		} else {
+			swInjectManifest.push(
+				new InjectManifest({
+					swSrc: swPath,
+					swDest: env.esm ? 'sw-legacy.js' : 'sw.js',
+					include: [
+						/200\.html$/,
+						/\.legacy.js$/,
+						/\.css$/,
+						/\.(png|jpg|svg|gif|webp)$/,
+					],
+				})
+			);
 		}
-
-		swInjectManifest.push(
-			new InjectManifest({
-				swSrc: swPath,
-				include: [/200\.html$/, /\.js$/, /\.css$/, /\.(png|jpg|svg|gif|webp)$/],
-				exclude: [/\.esm\.js$/],
-			})
-		);
 	}
 
 	let copyPatterns = [
@@ -142,7 +146,12 @@ async function clientConfig(env) {
 			}),
 			new PushManifestPlugin(env),
 			...(await renderHTMLPlugin(env)),
-			//...getBabelEsmPlugin(env),
+			env.esm &&
+				new OptimizePlugin({
+					modernize: false,
+					minify: isProd,
+					exclude: [/^sw.*\.js/],
+				}),
 			copyPatterns.length !== 0 &&
 				new CopyWebpackPlugin({
 					patterns: copyPatterns,
@@ -152,43 +161,6 @@ async function clientConfig(env) {
 	};
 }
 
-//function getBabelEsmPlugin(config) {
-//	const esmPlugins = [];
-//	if (config.esm) {
-//		esmPlugins.push(
-//			new BabelEsmPlugin({
-//				filename: config.isProd
-//					? '[name].[chunkhash:5].esm.js'
-//					: '[name].esm.js',
-//				chunkFilename: '[name].chunk.[chunkhash:5].esm.js',
-//				excludedPlugins: ['BabelEsmPlugin', 'InjectManifest'],
-//				beforeStartExecution: plugins => {
-//					plugins.forEach(plugin => {
-//						if (
-//							plugin.constructor.name === 'DefinePlugin' &&
-//							plugin.definitions
-//						) {
-//							for (const definition in plugin.definitions) {
-//								if (definition === 'process.env.ES_BUILD') {
-//									plugin.definitions[definition] = true;
-//								}
-//							}
-//						} else if (
-//							plugin.constructor.name === 'DefinePlugin' &&
-//							!plugin.definitions
-//						) {
-//							throw new Error(
-//								'WebpackDefinePlugin found but not `process.env.ES_BUILD`.'
-//							);
-//						}
-//					});
-//				},
-//			})
-//		);
-//	}
-//	return esmPlugins;
-//}
-
 /**
  * @returns {import('webpack').Configuration}
  */
@@ -210,14 +182,18 @@ function isProd(config) {
 				'process.env.ESM': config.esm,
 				'process.env.PRERENDER': config.prerender,
 			}),
-			new SizePlugin(),
+			new SizePlugin({
+				stripHash: name =>
+					name.replace(/\.[a-z0-9]{5}((\.legacy)?\.(?:js|css)$)/i, '.*****$1'),
+			}),
 		],
 		cache: true,
 
 		optimization: {
 			minimizer: [
 				new TerserPlugin({
 					parallel: true,
+					test: config.esm ? /sw.*.js$/ : /\.m?js(\?.*)?$/i,
 					terserOptions: {
 						output: { comments: false },
 						mangle: true,

packages/cli/package.json

@@ -112,6 +112,7 @@
     "mini-css-extract-plugin": "^2.5.3",
     "minimatch": "^3.0.3",
     "native-url": "0.3.4",
+    "optimize-plugin": "^1.1.0",
     "ora": "^5.4.0",
     "postcss": "^8.2.10",
     "postcss-load-config": "^3.0.1",

packages/cli/tests/images/build.js

@@ -1,6 +1,6 @@
 const common = {
-	'polyfills.ddfab.js': 5656,
-	'polyfills.ddfab.js.map': 18693,
+	'polyfills.d63a3.js': 5210,
+	'polyfills.d63a3.js.map': 18665,
 };
 
 exports.default = Object.assign({}, common, {
@@ -13,23 +13,23 @@ exports.default = Object.assign({}, common, {
 	'assets/favicon.ico': 15086,
 	'ssr-build/ssr-bundle.77c49.css': 1281,
 	'ssr-build/ssr-bundle.77c49.css.map': 2070,
-	'ssr-build/ssr-bundle.js': 11090,
+	'ssr-build/ssr-bundle.js': 9769,
 	'ssr-build/ssr-bundle.js.map': 30625,
-	'bundle.32925.js': 21429,
-	'bundle.32925.js.map': 111801,
+	'bundle.20e9c.js': 21323,
+	'bundle.20e9c.js.map': 114522,
 	'bundle.9bde9.css': 945,
 	'bundle.9bde9.css.map': 1758,
 	'favicon.ico': 15086,
-	'index.html': 2034,
+	'index.html': 2154,
 	'manifest.json': 455,
 	'preact_prerender_data.json': 11,
 	'push-manifest.json': 812,
-	'route-home.chunk.72205.js': 327,
-	'route-home.chunk.72205.js.map': 483,
+	'route-home.chunk.4a013.js': 306,
+	'route-home.chunk.4a013.js.map': 483,
 	'route-home.chunk.f1c94.css': 112,
 	'route-home.chunk.f1c94.css.map': 224,
-	'route-profile.chunk.abefe.js': 3514,
-	'route-profile.chunk.abefe.js.map': 15454,
+	'route-profile.chunk.efe1e.js': 2437,
+	'route-profile.chunk.efe1e.js.map': 15454,
 	'route-profile.chunk.e0d39.css': 118,
 	'route-profile.chunk.e0d39.css.map': 231,
 });