From 6d2540d54743597e1478031a27d142cfe6622e64 Mon Sep 17 00:00:00 2001 From: Shyamsundar Gadde Date: Tue, 3 Dec 2024 12:06:31 +0530 Subject: [PATCH 1/7] Centralize and automate plugin asset minification Signed-off-by: Shyamsundar Gadde --- webpack.config.js | 124 ++++++++-------------------------------------- 1 file changed, 20 insertions(+), 104 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 47744964d..42769ebc7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -35,124 +35,46 @@ const sharedConfig = { }; // Store plugins that require build process. -const pluginsWithBuild = [ - 'performance-lab', - 'embed-optimizer', - 'image-prioritizer', - 'optimization-detective', - 'web-worker-offloading', -]; - -/** - * Webpack Config: Performance Lab - * - * @param {*} env Webpack environment - * @return {Object} Webpack configuration - */ -const performanceLab = ( env ) => { - if ( env.plugin && env.plugin !== 'performance-lab' ) { - return defaultBuildConfig; - } - - const pluginDir = path.resolve( __dirname, 'plugins/performance-lab' ); - - return { - ...sharedConfig, - name: 'performance-lab', - plugins: [ - new CopyWebpackPlugin( { - patterns: [ - { - from: `${ pluginDir }/includes/admin/plugin-activate-ajax.js`, - to: `${ pluginDir }/includes/admin/plugin-activate-ajax.min.js`, - }, - ], - } ), - new WebpackBar( { - name: 'Building Performance Lab Assets', - color: '#2196f3', - } ), - ], - }; -}; +const pluginsWithBuild = [ 'optimization-detective', 'web-worker-offloading' ]; /** - * Webpack Config: Embed Optimizer + * Webpack Config: Minify Plugin Assets * - * @param {*} env Webpack environment * @return {Object} Webpack configuration */ -const embedOptimizer = ( env ) => { - if ( env.plugin && env.plugin !== 'embed-optimizer' ) { - return defaultBuildConfig; - } - - const pluginDir = path.resolve( __dirname, 'plugins/embed-optimizer' ); - +const minifyPluginAssets = () => { return { ...sharedConfig, - name: 'embed-optimizer', + name: 'minify-plugin-assets', plugins: [ new CopyWebpackPlugin( { patterns: [ { - from: `${ pluginDir }/detect.js`, - to: `${ pluginDir }/detect.min.js`, - }, - { - from: `${ pluginDir }/lazy-load.js`, - to: `${ pluginDir }/lazy-load.min.js`, - }, - ], - } ), - new WebpackBar( { - name: 'Building Embed Optimizer Assets', - color: '#2196f3', - } ), - ], - }; -}; - -/** - * Webpack Config: Image Prioritizer - * - * @param {*} env Webpack environment - * @return {Object} Webpack configuration - */ -const imagePrioritizer = ( env ) => { - if ( env.plugin && env.plugin !== 'image-prioritizer' ) { - return defaultBuildConfig; - } - - const pluginDir = path.resolve( __dirname, 'plugins/image-prioritizer' ); - - return { - ...sharedConfig, - name: 'image-prioritizer', - plugins: [ - new CopyWebpackPlugin( { - patterns: [ - { - from: `${ pluginDir }/lazy-load-video.js`, - to: `${ pluginDir }/lazy-load-video.min.js`, - }, - { - from: `${ pluginDir }/lazy-load-bg-image.js`, - to: `${ pluginDir }/lazy-load-bg-image.min.js`, + from: `plugins/**/*.js`, + to: ( { absoluteFilename } ) => + absoluteFilename.replace( /\.js$/, '.min.js' ), + // Exclude already-minified files and those in the build directory + globOptions: { + ignore: [ '**/build/**', '**/*.min.js' ], + }, }, { - from: `${ pluginDir }/lazy-load-bg-image.css`, - to: `${ pluginDir }/lazy-load-bg-image.min.css`, + from: `plugins/**/*.css`, + to: ( { absoluteFilename } ) => + absoluteFilename.replace( /\.css$/, '.min.css' ), transform: { transformer: cssMinifyTransformer, cache: false, }, + globOptions: { + ignore: [ '**/build/**', '**/*.min.css' ], + }, }, ], } ), new WebpackBar( { - name: 'Building Image Prioritizer Assets', - color: '#2196f3', + name: `Minifying Plugin Assets`, + color: '#f5e0dc', } ), ], }; @@ -194,10 +116,6 @@ const optimizationDetective = ( env ) => { cache: false, }, }, - { - from: `${ destination }/detect.js`, - to: `${ destination }/detect.min.js`, - }, ], } ), new WebpackBar( { @@ -333,9 +251,7 @@ const buildPlugin = ( env ) => { }; module.exports = [ - performanceLab, - embedOptimizer, - imagePrioritizer, + minifyPluginAssets, optimizationDetective, webWorkerOffloading, buildPlugin, From 4736748dca95cdeec4b24109af026455c3c0319b Mon Sep 17 00:00:00 2001 From: Shyamsundar Gadde Date: Tue, 3 Dec 2024 12:11:15 +0530 Subject: [PATCH 2/7] Ensure plugin asset minification runs before `build-plugin` Signed-off-by: Shyamsundar Gadde --- webpack.config.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 42769ebc7..c59223108 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -197,9 +197,11 @@ const buildPlugin = ( env ) => { const buildDir = path.resolve( __dirname, 'build' ); const to = path.resolve( buildDir, env.plugin ); const from = path.resolve( __dirname, 'plugins', env.plugin ); - const dependencies = pluginsWithBuild.includes( env.plugin ) - ? [ `${ env.plugin }` ] - : []; + const dependencies = [ 'minify-plugin-assets' ]; + + if ( pluginsWithBuild.includes( env.plugin ) ) { + dependencies.push( `${ env.plugin }` ); + } return { ...sharedConfig, From 8931d0fbe1cbff4d55004256179cd39f8099b741 Mon Sep 17 00:00:00 2001 From: Shyamsundar Gadde Date: Tue, 3 Dec 2024 12:12:09 +0530 Subject: [PATCH 3/7] Add support for selective plugin asset minification Signed-off-by: Shyamsundar Gadde --- webpack.config.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index c59223108..b7650fac3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -40,9 +40,21 @@ const pluginsWithBuild = [ 'optimization-detective', 'web-worker-offloading' ]; /** * Webpack Config: Minify Plugin Assets * + * @param {*} env Webpack environment * @return {Object} Webpack configuration */ -const minifyPluginAssets = () => { +const minifyPluginAssets = ( env ) => { + if ( env.plugin && ! standalonePlugins.includes( env.plugin ) ) { + // eslint-disable-next-line no-console + console.error( `Plugin "${ env.plugin }" not found. Aborting.` ); + + return defaultBuildConfig; + } + + const sourcePath = env.plugin + ? path.resolve( __dirname, 'plugins', env.plugin ) + : path.resolve( __dirname, 'plugins' ); + return { ...sharedConfig, name: 'minify-plugin-assets', @@ -50,7 +62,7 @@ const minifyPluginAssets = () => { new CopyWebpackPlugin( { patterns: [ { - from: `plugins/**/*.js`, + from: `${ sourcePath }/**/*.js`, to: ( { absoluteFilename } ) => absoluteFilename.replace( /\.js$/, '.min.js' ), // Exclude already-minified files and those in the build directory @@ -59,7 +71,7 @@ const minifyPluginAssets = () => { }, }, { - from: `plugins/**/*.css`, + from: `${ sourcePath }/**/*.css`, to: ( { absoluteFilename } ) => absoluteFilename.replace( /\.css$/, '.min.css' ), transform: { @@ -73,7 +85,7 @@ const minifyPluginAssets = () => { ], } ), new WebpackBar( { - name: `Minifying Plugin Assets`, + name: `Minifying Assets for ${ env.plugin ?? 'All Plugins' }`, color: '#f5e0dc', } ), ], From 628bfd0949e245e8505db1f13eec84557284c707 Mon Sep 17 00:00:00 2001 From: Shyamsundar Gadde Date: Tue, 3 Dec 2024 12:12:36 +0530 Subject: [PATCH 4/7] Fix errors for missing files during selective plugin asset minification Added `noErrorOnMissing` to prevent errors when JavaScript or CSS files are absent for specific plugins. --- webpack.config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webpack.config.js b/webpack.config.js index b7650fac3..f82620067 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -63,6 +63,7 @@ const minifyPluginAssets = ( env ) => { patterns: [ { from: `${ sourcePath }/**/*.js`, + noErrorOnMissing: true, to: ( { absoluteFilename } ) => absoluteFilename.replace( /\.js$/, '.min.js' ), // Exclude already-minified files and those in the build directory @@ -72,6 +73,7 @@ const minifyPluginAssets = ( env ) => { }, { from: `${ sourcePath }/**/*.css`, + noErrorOnMissing: true, to: ( { absoluteFilename } ) => absoluteFilename.replace( /\.css$/, '.min.css' ), transform: { From f6bcfe1397d6a06d10b55c42f2f386052c834434 Mon Sep 17 00:00:00 2001 From: Shyamsundar Gadde Date: Wed, 4 Dec 2024 10:22:12 +0530 Subject: [PATCH 5/7] Add clarifying comments for Webpack configurations Signed-off-by: Shyamsundar Gadde --- webpack.config.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index f82620067..5f5246cfd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -62,18 +62,19 @@ const minifyPluginAssets = ( env ) => { new CopyWebpackPlugin( { patterns: [ { + // NOTE: Automatically minifies JavaScript files with Terser during the copy process. from: `${ sourcePath }/**/*.js`, - noErrorOnMissing: true, to: ( { absoluteFilename } ) => absoluteFilename.replace( /\.js$/, '.min.js' ), // Exclude already-minified files and those in the build directory globOptions: { ignore: [ '**/build/**', '**/*.min.js' ], }, + // Prevents errors for plugins without JavaScript files. + noErrorOnMissing: true, }, { from: `${ sourcePath }/**/*.css`, - noErrorOnMissing: true, to: ( { absoluteFilename } ) => absoluteFilename.replace( /\.css$/, '.min.css' ), transform: { @@ -83,6 +84,7 @@ const minifyPluginAssets = ( env ) => { globOptions: { ignore: [ '**/build/**', '**/*.min.css' ], }, + noErrorOnMissing: true, }, ], } ), @@ -120,6 +122,7 @@ const optimizationDetective = ( env ) => { { from: `${ source }/dist/web-vitals.js`, to: `${ destination }/build/web-vitals.js`, + // Ensures the file is copied without minification, preserving its original form. info: { minimized: true }, }, { @@ -211,6 +214,7 @@ const buildPlugin = ( env ) => { const buildDir = path.resolve( __dirname, 'build' ); const to = path.resolve( buildDir, env.plugin ); const from = path.resolve( __dirname, 'plugins', env.plugin ); + // Ensures minification and the plugin's build process (if defined) run before building the plugin. const dependencies = [ 'minify-plugin-assets' ]; if ( pluginsWithBuild.includes( env.plugin ) ) { From d9b93eb420589b4f79dd6ae51b2a778d72688991 Mon Sep 17 00:00:00 2001 From: Shyamsundar Gadde Date: Thu, 5 Dec 2024 15:47:14 +0530 Subject: [PATCH 6/7] Remove unnecessary string interpolation Co-authored-by: Weston Ruter --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 5f5246cfd..5a399278a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -218,7 +218,7 @@ const buildPlugin = ( env ) => { const dependencies = [ 'minify-plugin-assets' ]; if ( pluginsWithBuild.includes( env.plugin ) ) { - dependencies.push( `${ env.plugin }` ); + dependencies.push( env.plugin ); } return { From a44cf8545d2dfdc2ebdcb1dd96986c62e9d0362e Mon Sep 17 00:00:00 2001 From: Shyamsundar Gadde Date: Thu, 12 Dec 2024 21:39:19 +0530 Subject: [PATCH 7/7] Trigger unit testing for plugins after changes to Webpack config Signed-off-by: Shyamsundar Gadde --- .github/workflows/php-test-plugins.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/php-test-plugins.yml b/.github/workflows/php-test-plugins.yml index 97e862abf..bea825bd4 100644 --- a/.github/workflows/php-test-plugins.yml +++ b/.github/workflows/php-test-plugins.yml @@ -16,6 +16,7 @@ on: - 'tests/multisite.xml' - 'composer.json' - 'composer.lock' + - 'webpack.config.js' pull_request: # Only run if PHP-related files changed. paths: @@ -28,6 +29,7 @@ on: - 'tests/multisite.xml' - 'composer.json' - 'composer.lock' + - 'webpack.config.js' types: - opened - reopened