Skip to content

Centralize and Automate Plugin Asset Minification in Webpack #1718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: trunk
Choose a base branch
from
+39 −105
Open

Centralize and Automate Plugin Asset Minification in Webpack #1718

Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6d2540d
Centralize and automate plugin asset minification
ShyamGadde Dec 3, 2024
4736748
Ensure plugin asset minification runs before `build-plugin`
ShyamGadde Dec 3, 2024
8931d0f
Add support for selective plugin asset minification
ShyamGadde Dec 3, 2024
628bfd0
Fix errors for missing files during selective plugin asset minification
ShyamGadde Dec 3, 2024
fb741b7
Merge remote-tracking branch 'upstream/trunk' into update/centralize-…
ShyamGadde Dec 4, 2024
f6bcfe1
Add clarifying comments for Webpack configurations
ShyamGadde Dec 4, 2024
d9b93eb
Remove unnecessary string interpolation
ShyamGadde Dec 5, 2024
4093d67
Merge branch 'trunk' into update/centralize-plugin-asset-minification
ShyamGadde Dec 5, 2024
7e3a1ba
Merge branch 'trunk' into update/centralize-plugin-asset-minification
ShyamGadde Dec 9, 2024
2c0bde8
Merge branch 'trunk' into update/centralize-plugin-asset-minification
ShyamGadde Dec 12, 2024
a44cf85
Trigger unit testing for plugins after changes to Webpack config
ShyamGadde Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 33 additions & 101 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,124 +35,60 @@ const sharedConfig = {
};

// Store plugins that require build process.
const pluginsWithBuild = [
'performance-lab',
'embed-optimizer',
'image-prioritizer',
'optimization-detective',
'web-worker-offloading',
];
const pluginsWithBuild = [ 'optimization-detective', 'web-worker-offloading' ];

/**
* Webpack Config: Performance Lab
* Webpack Config: Minify Plugin Assets
*
* @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',
} ),
],
};
};

/**
* Webpack Config: Embed Optimizer
*
* @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' );

return {
...sharedConfig,
name: 'embed-optimizer',
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',
} ),
],
};
};
const minifyPluginAssets = ( env ) => {
if ( env.plugin && ! standalonePlugins.includes( env.plugin ) ) {
// eslint-disable-next-line no-console
console.error( `Plugin "${ env.plugin }" not found. Aborting.` );

/**
* 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' );
const sourcePath = env.plugin
? path.resolve( __dirname, 'plugins', env.plugin )
: path.resolve( __dirname, 'plugins' );

return {
...sharedConfig,
name: 'image-prioritizer',
name: 'minify-plugin-assets',
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: `${ 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' ],
},
},
{
from: `${ pluginDir }/lazy-load-bg-image.css`,
to: `${ pluginDir }/lazy-load-bg-image.min.css`,
from: `${ sourcePath }/**/*.css`,
noErrorOnMissing: true,
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 Assets for ${ env.plugin ?? 'All Plugins' }`,
color: '#f5e0dc',
} ),
],
};
Expand Down Expand Up @@ -194,10 +130,6 @@ const optimizationDetective = ( env ) => {
cache: false,
},
},
{
from: `${ destination }/detect.js`,
to: `${ destination }/detect.min.js`,
},
],
} ),
new WebpackBar( {
Expand Down Expand Up @@ -279,9 +211,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,
Expand Down Expand Up @@ -333,9 +267,7 @@ const buildPlugin = ( env ) => {
};

module.exports = [
performanceLab,
embedOptimizer,
imagePrioritizer,
minifyPluginAssets,
optimizationDetective,
webWorkerOffloading,
buildPlugin,
Expand Down
Loading