From 0b10db98d928df55bf382a11dcfb677482289b17 Mon Sep 17 00:00:00 2001 From: Eason Su Date: Fri, 25 Aug 2023 17:31:48 +0800 Subject: [PATCH 1/5] Change the bundled `@woocommerce` packages to use the external sources from DEWP. --- .externalized.json | 2 +- webpack.config.js | 10 ---------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/.externalized.json b/.externalized.json index f4a68c1e60..a1ea74111d 100644 --- a/.externalized.json +++ b/.externalized.json @@ -1 +1 @@ -["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","lodash","moment","react","react-dom"] \ No newline at end of file +["@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","lodash","react","react-dom"] \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index df0d42e077..b62205ecb4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -20,16 +20,6 @@ const requestToExternal = ( request ) => { request = request.substr( explicitlyExtractPrefix.length ); return defaultRequestToExternalWP( request ); } - const bundledPackages = [ - // Opt-out WooCommerce packages. - '@woocommerce/currency', - '@woocommerce/date', - '@woocommerce/number', - '@woocommerce/tracks', - ]; - if ( bundledPackages.includes( request ) ) { - return false; - } // Follow with the default behavior for any other. return undefined; From 5a2e20409a53ccb3b7fcbfe5c46988ca2b153b38 Mon Sep 17 00:00:00 2001 From: Eason Su Date: Fri, 25 Aug 2023 17:58:07 +0800 Subject: [PATCH 2/5] Remove the selective bundling implementation that gradually externalizes packages into DEWP. --- jest.config.js | 1 - js/src/jsconfig.json | 3 +-- package-lock.json | 1 - package.json | 1 - webpack.config.js | 30 ------------------------------ 5 files changed, 1 insertion(+), 35 deletions(-) diff --git a/jest.config.js b/jest.config.js index 50f2c6d317..c12f1e1340 100644 --- a/jest.config.js +++ b/jest.config.js @@ -16,7 +16,6 @@ module.exports = { '\\.scss$': '/tests/mocks/assets/styleMock.js', // Transform our `.~/` alias. '^\\.~/(.*)$': '/js/src/$1', - '^extracted/(.*)$': '$1', '@woocommerce/settings': '/js/src/tests/dependencies/woocommerce/settings', '@automattic/calypso-config': diff --git a/js/src/jsconfig.json b/js/src/jsconfig.json index 50c6214d97..2ee1c04c7c 100644 --- a/js/src/jsconfig.json +++ b/js/src/jsconfig.json @@ -2,8 +2,7 @@ "compilerOptions": { "baseUrl": ".", "paths": { - ".~/*": [ "./*" ], - "extracted/*": [ "*" ] + ".~/*": [ "./*" ] } } } diff --git a/package-lock.json b/package-lock.json index 2d72644d57..c89485f2a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,7 +50,6 @@ "@types/jest": "^27.5.2", "@woocommerce/dependency-extraction-webpack-plugin": "^2.0.0", "@woocommerce/eslint-plugin": "^1.2.0", - "@wordpress/dependency-extraction-webpack-plugin": "^4.4.0", "@wordpress/env": "^8.4.0", "@wordpress/jest-preset-default": "^11.9.0", "@wordpress/prettier-config": "2.18.1", diff --git a/package.json b/package.json index eb11e267aa..9729120411 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,6 @@ "@types/jest": "^27.5.2", "@woocommerce/dependency-extraction-webpack-plugin": "^2.0.0", "@woocommerce/eslint-plugin": "^1.2.0", - "@wordpress/dependency-extraction-webpack-plugin": "^4.4.0", "@wordpress/env": "^8.4.0", "@wordpress/jest-preset-default": "^11.9.0", "@wordpress/prettier-config": "2.18.1", diff --git a/webpack.config.js b/webpack.config.js index b62205ecb4..330941d488 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,10 +1,6 @@ const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); const { hasArgInCLI } = require( '@wordpress/scripts/utils' ); const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' ); -const { - defaultRequestToExternal: defaultRequestToExternalWP, - defaultRequestToHandle: defaultRequestToHandleWP, -} = require( '@wordpress/dependency-extraction-webpack-plugin/lib/util' ); const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' ); const path = require( 'path' ); @@ -12,29 +8,6 @@ const path = require( 'path' ); const isProduction = process.env.NODE_ENV === 'production'; const hasReactFastRefresh = hasArgInCLI( '--hot' ) && ! isProduction; -const explicitlyExtractPrefix = 'extracted/'; - -const requestToExternal = ( request ) => { - // Externalized when explicitely asked for. - if ( request.startsWith( explicitlyExtractPrefix ) ) { - request = request.substr( explicitlyExtractPrefix.length ); - return defaultRequestToExternalWP( request ); - } - - // Follow with the default behavior for any other. - return undefined; -}; - -const requestToHandle = ( request ) => { - // Externalized when explicitely asked for. - if ( request.startsWith( explicitlyExtractPrefix ) ) { - request = request.substr( explicitlyExtractPrefix.length ); - return defaultRequestToHandleWP( request ); - } - // Follow with the default behavior for any other. - return undefined; -}; - const exceptSVGAndPNGRule = ( rule ) => { return ! rule.test.toString().match( /svg|png/i ); }; @@ -66,7 +39,6 @@ const webpackConfig = { ...defaultConfig.resolve, alias: { '.~': path.resolve( process.cwd(), 'js/src/' ), - extracted: path.resolve( __dirname, 'node_modules' ), }, fallback: { /** @@ -98,8 +70,6 @@ const webpackConfig = { new WooCommerceDependencyExtractionWebpackPlugin( { externalizedReport: ! hasReactFastRefresh && '../../.externalized.json', - requestToExternal, - requestToHandle, } ), ], entry: { From 84c9ca8857747415d78ae9ee9bb464adb5416ea6 Mon Sep 17 00:00:00 2001 From: Eason Su Date: Fri, 25 Aug 2023 18:03:59 +0800 Subject: [PATCH 3/5] Update DEWP document. --- Working with DEWP.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/Working with DEWP.md b/Working with DEWP.md index 03f1212460..a3edf98086 100644 --- a/Working with DEWP.md +++ b/Working with DEWP.md @@ -19,12 +19,17 @@ So we could later inspect that. ## Selective bundling & extracting. -Sometimes the fact we do bundle a package that is provided by WordPress/WooCommerce instance introduces errors, as some packages are not effectively modular, so we face version conflicts, style collisions, etc. +In the past, we did bundle a package that is provided by WordPress/WooCommerce instance introduces errors, as some packages are not effectively modular, so we face version conflicts, style collisions, etc. Also, we'd like to reduce the size of our bundle, so eventually, we aim to extract/externalize as much as possible and when possible import from an external package. -To help with that we implemented the `extracted/` prefix. It's also a custom implementation in [/webpack.config.js](/develop/webpack.config.js). +To help with that we had ever implemented the `extracted/` prefix. It was also a custom implementation in webpack.config.js. Thanks to that even though a package is bundled, the given import would fetch it from external. +Now, we have already externalized all DEWP-able packages, so the implementation of `extracted/` prefix was removed as well. +If someday we ever need it again, please refer to: +- The PR implemented it: https://github.com/woocommerce/google-listings-and-ads/pull/1762 +- The commit removed it: https://github.com/woocommerce/google-listings-and-ads/commit/5a2e20409a53ccb3b7fcbfe5c46988ca2b153b38 + ## NPM scripts We also have a bunch of NPM scripts to help us work with them daily. From 6358de365713ede2013f4edae6d2d680ead09f3e Mon Sep 17 00:00:00 2001 From: Eason Su Date: Fri, 25 Aug 2023 18:14:30 +0800 Subject: [PATCH 4/5] Rebalance the max size config of bundlewatch for each non-wildcard file to 1.2 times. --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9729120411..542023691c 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,7 @@ }, { "path": "./js/build/index.js", - "maxSize": "209.08 kB" + "maxSize": "148.52 kB" }, { "path": "./js/build/*.css", @@ -156,7 +156,7 @@ }, { "path": "./google-listings-and-ads.zip", - "maxSize": "8.48 mB", + "maxSize": "8.22 mB", "compression": "none" } ], From 0157e872b1d288a503b49ba919aa101695e8e574 Mon Sep 17 00:00:00 2001 From: Eason Su Date: Fri, 1 Sep 2023 10:38:58 +0800 Subject: [PATCH 5/5] Update DEWP document. Address https://github.com/woocommerce/google-listings-and-ads/pull/2072#issuecomment-1701041999 --- Working with DEWP.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/Working with DEWP.md b/Working with DEWP.md index a3edf98086..417849b116 100644 --- a/Working with DEWP.md +++ b/Working with DEWP.md @@ -19,16 +19,17 @@ So we could later inspect that. ## Selective bundling & extracting. -In the past, we did bundle a package that is provided by WordPress/WooCommerce instance introduces errors, as some packages are not effectively modular, so we face version conflicts, style collisions, etc. -Also, we'd like to reduce the size of our bundle, so eventually, we aim to extract/externalize as much as possible and when possible import from an external package. +In the past, we did bundle some packages provided by WordPress/WooCommerce instances. We did so to use a specific package version, for example, to ship a new feature we need, fix, or avoid a bug. However, bundling a package tends to introduce other errors, as some packages are not effectively modular, so we face version conflicts, style collisions, etc. +Also, we'd like to reduce the size of our bundle, so eventually, we aim to extract/externalize as much as possible and import from an external package when possible. -To help with that we had ever implemented the `extracted/` prefix. It was also a custom implementation in webpack.config.js. -Thanks to that even though a package is bundled, the given import would fetch it from external. +To help with that, we had implemented the `extracted/` prefix in the past. It was also a custom implementation in [`webpack.config.js`](webpack.config.js). +Thanks to that, even though a package is bundled, the given import would fetch it from external. -Now, we have already externalized all DEWP-able packages, so the implementation of `extracted/` prefix was removed as well. +Now, we have already externalized all DEWP-able packages, so we also removed the implementation of the `extracted/` prefix. If someday we ever need it again, please refer to: - The PR implemented it: https://github.com/woocommerce/google-listings-and-ads/pull/1762 - The commit removed it: https://github.com/woocommerce/google-listings-and-ads/commit/5a2e20409a53ccb3b7fcbfe5c46988ca2b153b38 +Alternatively, we can consider an opposite approach and selectively **bundle** with a similar prefix implementation. ## NPM scripts