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/Working with DEWP.md b/Working with DEWP.md index 03f1212460..417849b116 100644 --- a/Working with DEWP.md +++ b/Working with DEWP.md @@ -19,11 +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. -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 implemented the `extracted/` prefix. It's also a custom implementation in [/webpack.config.js](/develop/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 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 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..542023691c 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", @@ -145,7 +144,7 @@ }, { "path": "./js/build/index.js", - "maxSize": "209.08 kB" + "maxSize": "148.52 kB" }, { "path": "./js/build/*.css", @@ -157,7 +156,7 @@ }, { "path": "./google-listings-and-ads.zip", - "maxSize": "8.48 mB", + "maxSize": "8.22 mB", "compression": "none" } ], diff --git a/webpack.config.js b/webpack.config.js index df0d42e077..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,39 +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 ); - } - 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; -}; - -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 ); }; @@ -76,7 +39,6 @@ const webpackConfig = { ...defaultConfig.resolve, alias: { '.~': path.resolve( process.cwd(), 'js/src/' ), - extracted: path.resolve( __dirname, 'node_modules' ), }, fallback: { /** @@ -108,8 +70,6 @@ const webpackConfig = { new WooCommerceDependencyExtractionWebpackPlugin( { externalizedReport: ! hasReactFastRefresh && '../../.externalized.json', - requestToExternal, - requestToHandle, } ), ], entry: {