From 73a57a3205569aa6fa6930a6d0ee2e947a1f3cc3 Mon Sep 17 00:00:00 2001 From: Amir Zahedi Date: Wed, 19 Feb 2025 11:56:20 +1000 Subject: [PATCH] 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 1ce31a53f07dc19964a7fdac0cc28695379fdf41. * chore: Update dependencies for improved compatibility and performance (cherry picked from commit 1ce31a53f07dc19964a7fdac0cc28695379fdf41) * Revert "chore: Update dependencies for improved compatibility and performance" This reverts commit 42107e8584d6cb1272cc10523918ef66ea98d652. * 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 --- .changeset/sharp-chicken-sparkle.md | 5 +++ packages/gdu/commands/start/runSPA.ts | 3 +- packages/gdu/config/webpack/webpack.config.ts | 38 ++++++++++++------- .../webpack/webpack.webcomponents.config.ts | 35 +++++++++-------- packages/gdu/package.json | 2 +- yarn.lock | 6 +-- 6 files changed, 55 insertions(+), 34 deletions(-) create mode 100644 .changeset/sharp-chicken-sparkle.md diff --git a/.changeset/sharp-chicken-sparkle.md b/.changeset/sharp-chicken-sparkle.md new file mode 100644 index 00000000..4120d1db --- /dev/null +++ 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 index fdb4e6e3..16be4c28 100644 --- 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 index b1af9dc2..ca6906a7 100644 --- 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 = { 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 index 4da896c4..4c58f303 100644 --- 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 = { 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 index 2c219fc6..c31ce549 100644 --- 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 index 392d6636..bd765400 100644 --- 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: