diff --git a/package.json b/package.json index 1d507a76b5f45c..848f4bac3d8503 100644 --- a/package.json +++ b/package.json @@ -184,6 +184,7 @@ "worker-farm": "1.7.0" }, "scripts": { + "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/CHANGELOG.md b/packages/scripts/CHANGELOG.md index d5c15f8e12816d..00ea8d42b404dc 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 diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 4c227696a7da35..52aefbb7c6ff6d 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -19,6 +19,11 @@ const isProduction = process.env.NODE_ENV === 'production'; const mode = isProduction ? 'production' : 'development'; const config = { + optimization: { + // Only concatenate modules in production, when not analyzing bundles. + concatenateModules: + mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER, + }, mode, entry: { index: path.resolve( process.cwd(), 'src', 'index.js' ), @@ -70,8 +75,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 340728cfe103ab..ec9fe14d36983f 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' ); @@ -39,6 +40,11 @@ const gutenbergPackages = Object.keys( dependencies ) .map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) ); module.exports = { + optimization: { + // Only concatenate modules in production, when not analyzing bundles. + concatenateModules: + mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER, + }, mode, entry: gutenbergPackages.reduce( ( memo, packageName ) => { const name = camelCaseDash( packageName ); @@ -62,6 +68,9 @@ module.exports = { ] ), }, plugins: [ + // 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( @@ -189,7 +198,7 @@ module.exports = { }, ] ), new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ), - ], + ].filter( Boolean ), watchOptions: { ignored: '!packages/*/!(src)/**/*', },