Es modules gdu (#297)

* chore: Update Terser plugin options and version for improved minification * chore: Update dependencies for improved compatibility and performance * Revert "chore: Update dependencies for improved compatibility and performance" This reverts commit 1ce31a5. * chore: Update dependencies for improved compatibility and performance (cherry picked from commit 1ce31a5) * Revert "chore: Update dependencies for improved compatibility and performance" This reverts commit 42107e8. * chore: Update webpack configuration for module output and ES2020 target * chore: Add documentation for GDU ES Modules bundling * chore: Enable usedExports and providedExports in webpack configuration
autoguru-au · Feb 19, 2025 · 73a57a3 · 73a57a3
1 parent d4a522e
commit 73a57a3
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 34 deletions.
diff --git a/.changeset/sharp-chicken-sparkle.md b/.changeset/sharp-chicken-sparkle.md
@@ -0,0 +1,5 @@
+---
+'gdu': minor
+---
+
+GDU bundles MFE as ES Modules
diff --git a/packages/gdu/commands/start/runSPA.ts b/packages/gdu/commands/start/runSPA.ts
@@ -46,9 +46,10 @@ export const runSPA = async (guruConfig: GuruConfig, isDebug) => {
 	const consumerHtmlTemplate = getConsumerHtmlTemplate(guruConfig);
 
 	webpackConfig.plugins.push(
-		// @ts-ignore
 		new HtmlWebpackPlugin({
 			template: consumerHtmlTemplate ?? 'auto',
+			// @ts-ignore
+			scriptLoading: 'module',
 		}),
 	);
 	webpackConfig.plugins.push(

diff --git a/packages/gdu/config/webpack/webpack.config.ts b/packages/gdu/config/webpack/webpack.config.ts
@@ -12,7 +12,8 @@ import {
 	defineReactCompilerLoaderOption,
 	reactCompilerLoader,
 } from 'react-compiler-webpack';
-import TerserPlugin from 'terser-webpack-plugin';
+import { MinifyOptions } from 'terser';
+import TerserPlugin, { MinimizerOptions } from 'terser-webpack-plugin';
 import { TreatPlugin } from 'treat/webpack-plugin';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import {
@@ -40,25 +41,24 @@ import { GuruBuildManifest } from './plugins/GuruBuildManifest';
 
 const { branch = 'null', commit = 'null' } = envCI();
 
-const terserOptions = {
+const terserOptions: MinimizerOptions<MinifyOptions> = {
 	ie8: false,
-	output: {
-		ecma: 5,
-		safari10: true,
-		comments: false,
-		ascii_only: true,
-	},
-	parse: { ecma: 8 },
+	parse: { ecma: 2020 },
 	compress: {
-		ecma: 5,
-		warnings: false,
+		ecma: 2020,
 		comparisons: false,
-		inline: 2,
+		inline: 3,
 		hoist_funs: true,
 		toplevel: true,
-		passes: 5,
+		passes: 2,
+		pure_getters: true,
+		module: true,
+	},
+	format: {
+		ecma: 2020,
+		comments: false,
 	},
-	mangle: { safari10: true },
+	mangle: true,
 };
 
 const vendorRegex =
@@ -97,6 +97,7 @@ export const baseOptions = (
 		},
 		experiments: {
 			layers: true,
+			outputModule: true,
 		},
 		cache: {
 			type: 'filesystem',
@@ -203,9 +204,12 @@ export const baseOptions = (
 			minimizer: [
 				new TerserPlugin({
 					parallel: true,
+					minify: TerserPlugin.terserMinify,
 					terserOptions,
 				}),
 			],
+			usedExports: true,
+			providedExports: true,
 		},
 		module: {
 			strictExportPresence: true,
@@ -400,6 +404,12 @@ export const baseOptions = (
 				test: [/.ts$/, /.tsx$/],
 			}),
 		].filter(Boolean),
+		target: 'es2020',
+		output: {
+			library: {
+				type: 'module',
+			},
+		},
 	};
 };
 

diff --git a/packages/gdu/config/webpack/webpack.webcomponents.config.ts b/packages/gdu/config/webpack/webpack.webcomponents.config.ts
@@ -8,7 +8,8 @@ import browsers from 'browserslist-config-autoguru';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import envCI from 'env-ci';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import TerserPlugin from 'terser-webpack-plugin';
+import { MinifyOptions } from 'terser';
+import TerserPlugin, { MinimizerOptions } from 'terser-webpack-plugin';
 import { TreatPlugin } from 'treat/webpack-plugin';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import {
@@ -25,27 +26,25 @@ import { getHooks } from '../../utils/hooks';
 
 const { branch = 'null', commit = 'null' } = envCI();
 
-const terserOptions = {
+const terserOptions: MinimizerOptions<MinifyOptions> = {
 	ie8: false,
-	output: {
-		ecma: 5,
-		safari10: true,
-		comments: false,
-		ascii_only: true,
-	},
-	parse: { ecma: 8 },
+	parse: { ecma: 2020 },
 	compress: {
-		ecma: 5,
-		warnings: false,
+		ecma: 2020,
 		comparisons: false,
-		inline: 2,
+		inline: 3,
 		hoist_funs: true,
 		toplevel: true,
-		passes: 5,
+		passes: 2,
+		pure_getters: true,
+		module: true,
+	},
+	format: {
+		ecma: 2020,
+		comments: false,
 	},
-	mangle: { safari10: true },
+	mangle: true,
 };
-
 const hooks = getHooks();
 
 const frameworkRegex =
@@ -141,9 +140,13 @@ export const makeWebComponentsWebpackConfig = (
 			crossOriginLoading: 'anonymous',
 			sourceMapFilename: 'sourceMaps/[file].map',
 			pathinfo: false,
+			library: {
+				type: 'module',
+			},
 		},
 		experiments: {
 			layers: true,
+			outputModule: true,
 		},
 		cache: {
 			type: 'filesystem',
@@ -180,6 +183,7 @@ export const makeWebComponentsWebpackConfig = (
 			minimizer: [
 				new TerserPlugin({
 					parallel: true,
+					minify: TerserPlugin.terserMinify,
 					terserOptions,
 				}),
 			],
@@ -322,5 +326,6 @@ export const makeWebComponentsWebpackConfig = (
 				exclude: [/.css.ts$/, frameworkRegex],
 			}),
 		].filter(Boolean),
+		target: 'es2020',
 	};
 };
diff --git a/packages/gdu/package.json b/packages/gdu/package.json
@@ -82,7 +82,7 @@
 		"resolve-url-loader": "^3.1.2",
 		"sade": "^1.7.4",
 		"tapable": "^2.2.0",
-		"terser-webpack-plugin": "^5.1.4",
+		"terser-webpack-plugin": "^5.3.11",
 		"treat": "2.0.4",
 		"ts-dedent": "^2.2.0",
 		"tsconfig-paths-webpack-plugin": "^3.5.2",

diff --git a/yarn.lock b/yarn.lock
@@ -10496,7 +10496,7 @@ __metadata:
     resolve-url-loader: ^3.1.2
     sade: ^1.7.4
     tapable: ^2.2.0
-    terser-webpack-plugin: ^5.1.4
+    terser-webpack-plugin: ^5.3.11
     treat: 2.0.4
     ts-dedent: ^2.2.0
     tsconfig-paths-webpack-plugin: ^3.5.2
@@ -19172,7 +19172,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.1.3, terser-webpack-plugin@npm:^5.1.4":
+"terser-webpack-plugin@npm:^5.1.3":
   version: 5.1.4
   resolution: "terser-webpack-plugin@npm:5.1.4"
   dependencies:
@@ -19188,7 +19188,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.3.10":
+"terser-webpack-plugin@npm:^5.3.10, terser-webpack-plugin@npm:^5.3.11":
   version: 5.3.11
   resolution: "terser-webpack-plugin@npm:5.3.11"
   dependencies: