From 6fe2f2f12c689f771f94b86b46f99907d673bc0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Thu, 23 Apr 2020 15:13:59 +0100 Subject: [PATCH 1/5] Add `analyze-bundles` script This makes it easier to analyze bundles with webpack-bundle-analyzer, which is already included as a project dependency. --- package.json | 1 + webpack.config.js | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 1d507a76b5f45..b9c99bba2035d 100644 --- a/package.json +++ b/package.json @@ -184,6 +184,7 @@ "worker-farm": "1.7.0" }, "scripts": { + "analyze-bundles": "WP_BUNDLE_ANALYZER=true npm run build", "prebuild": "npm run check-engines", "clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"", "clean:package-types": "tsc --build --clean", diff --git a/webpack.config.js b/webpack.config.js index 340728cfe103a..eefaf1fa0ae02 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,7 @@ /** * External dependencies */ +const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' ); const { DefinePlugin } = require( 'webpack' ); const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); const postcss = require( 'postcss' ); @@ -38,7 +39,15 @@ const gutenbergPackages = Object.keys( dependencies ) ) .map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) ); +const analyzingBundles = + process.env.WP_BUNDLE_ANALYZER && + process.env.WP_BUNDLE_ANALYZER !== 'false'; + module.exports = { + optimization: { + // Don't concatenate modules when analyzing bundles. + concatenateModules: ! analyzingBundles, + }, mode, entry: gutenbergPackages.reduce( ( memo, packageName ) => { const name = camelCaseDash( packageName ); @@ -62,6 +71,7 @@ module.exports = { ] ), }, plugins: [ + analyzingBundles && new BundleAnalyzerPlugin(), new DefinePlugin( { // Inject the `GUTENBERG_PHASE` global, used for feature flagging. 'process.env.GUTENBERG_PHASE': JSON.stringify( @@ -189,7 +199,7 @@ module.exports = { }, ] ), new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ), - ], + ].filter( Boolean ), watchOptions: { ignored: '!packages/*/!(src)/**/*', }, From 86e74b41747c097da68ceba2674b9fdf08be87cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Thu, 23 Apr 2020 15:53:06 +0100 Subject: [PATCH 2/5] Add cross-env to script. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b9c99bba2035d..0da7494933632 100644 --- a/package.json +++ b/package.json @@ -184,7 +184,7 @@ "worker-farm": "1.7.0" }, "scripts": { - "analyze-bundles": "WP_BUNDLE_ANALYZER=true npm run build", + "analyze-bundles": "cross-env WP_BUNDLE_ANALYZER=true npm run build", "prebuild": "npm run check-engines", "clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"", "clean:package-types": "tsc --build --clean", From 601a6efd32cdcbb0099cf5ae2d880112a12fc51f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Wed, 29 Apr 2020 17:08:04 +0100 Subject: [PATCH 3/5] Make webpack configs more consistent --- package.json | 2 +- packages/scripts/config/webpack.config.js | 8 ++++++-- webpack.config.js | 10 ++++------ 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 0da7494933632..848f4bac3d850 100644 --- a/package.json +++ b/package.json @@ -184,7 +184,7 @@ "worker-farm": "1.7.0" }, "scripts": { - "analyze-bundles": "cross-env WP_BUNDLE_ANALYZER=true npm run build", + "analyze-bundles": "cross-env WP_BUNDLE_ANALYZER=1 npm run build", "prebuild": "npm run check-engines", "clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"", "clean:package-types": "tsc --build --clean", diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 4c227696a7da3..1c371085cf6f8 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -19,6 +19,10 @@ const isProduction = process.env.NODE_ENV === 'production'; const mode = isProduction ? 'production' : 'development'; const config = { + optimization: { + // Don't concatenate modules when analyzing bundles. + concatenateModules: ! process.env.WP_BUNDLE_ANALYZER, + }, mode, entry: { index: path.resolve( process.cwd(), 'src', 'index.js' ), @@ -70,8 +74,8 @@ const config = { ], }, plugins: [ - // WP_BUNDLE_ANALYZER global variable enables utility that represents bundle content - // as convenient interactive zoomable treemap. + // The WP_BUNDLE_ANALYZER global variable enables a utility that represents bundle + // content as a convenient interactive zoomable treemap. process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(), // WP_LIVE_RELOAD_PORT global variable changes port on which live reload works // when running watch mode. diff --git a/webpack.config.js b/webpack.config.js index eefaf1fa0ae02..36ff30f34deb8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -39,14 +39,10 @@ const gutenbergPackages = Object.keys( dependencies ) ) .map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) ); -const analyzingBundles = - process.env.WP_BUNDLE_ANALYZER && - process.env.WP_BUNDLE_ANALYZER !== 'false'; - module.exports = { optimization: { // Don't concatenate modules when analyzing bundles. - concatenateModules: ! analyzingBundles, + concatenateModules: ! process.env.WP_BUNDLE_ANALYZER, }, mode, entry: gutenbergPackages.reduce( ( memo, packageName ) => { @@ -71,7 +67,9 @@ module.exports = { ] ), }, plugins: [ - analyzingBundles && new BundleAnalyzerPlugin(), + // The WP_BUNDLE_ANALYZER global variable enables a utility that represents bundle + // content as a convenient interactive zoomable treemap. + process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(), new DefinePlugin( { // Inject the `GUTENBERG_PHASE` global, used for feature flagging. 'process.env.GUTENBERG_PHASE': JSON.stringify( From de5d00aae379f713a95437266093795d53f8cd96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Wed, 29 Apr 2020 17:24:04 +0100 Subject: [PATCH 4/5] Only concatenate modules in production Follows the default behaviour of webpack --- packages/scripts/config/webpack.config.js | 5 +++-- webpack.config.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 1c371085cf6f8..52aefbb7c6ff6 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -20,8 +20,9 @@ const mode = isProduction ? 'production' : 'development'; const config = { optimization: { - // Don't concatenate modules when analyzing bundles. - concatenateModules: ! process.env.WP_BUNDLE_ANALYZER, + // Only concatenate modules in production, when not analyzing bundles. + concatenateModules: + mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER, }, mode, entry: { diff --git a/webpack.config.js b/webpack.config.js index 36ff30f34deb8..ec9fe14d36983 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -41,8 +41,9 @@ const gutenbergPackages = Object.keys( dependencies ) module.exports = { optimization: { - // Don't concatenate modules when analyzing bundles. - concatenateModules: ! process.env.WP_BUNDLE_ANALYZER, + // Only concatenate modules in production, when not analyzing bundles. + concatenateModules: + mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER, }, mode, entry: gutenbergPackages.reduce( ( memo, packageName ) => { From 78b23297383fb482aefa7b5efc11b2ccfcc2b9ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Tue, 5 May 2020 17:49:36 +0100 Subject: [PATCH 5/5] Add entry to scripts changelog --- packages/scripts/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index d5c15f8e12816..00ea8d42b404d 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -3,6 +3,7 @@ ### Breaking Changes - The bundled `puppeteer` (`^2.0.0`) dependency has been replaced with `puppeteer-core` in version `3.0.0`. Puppeteer uses Chromium v81 instead of Chromium v79. See the [full list of changes](https://github.com/puppeteer/puppeteer/releases/tag/v3.0.0). It also allowed preventing Chromium installation together with `@wordpress/scripts`. It happens now on-demand when running `test-e2e` script, and it re-triggers only when a new version is required. +- Bundle analysis now runs with module concatenation disabled. This represents the size of individual modules more accurately, at the cost of not providing an exact byte-for-byte match to the final size in the production chunk. ### New Features